vue组件递归调用

在实际工作中，对一些有规律的DOM结构，如果我们一遍遍的写相同的代码，显然不符合我们程序员的身份。。。

那有没有一种方法来解决这个问题？

那就是”递归“，就是在组件中调用自己

组件可以调用本身需符合一下条件：

该组件有name属性
确保递归调用有终止条件，防止内存溢出

下面我们就来演示，实现一个树结构，虽然有很多成型的前端框架都有现成的组件可以调用，如：el-tree，但如果我们只是会用组件，是不是有点不符合我们程序员的身份。。。扯远了，如果我们需要对树进行特殊的数据处理，还是需要了解一点原理

父组件

<template>
  <div>
    <treeMenu :tree-list="treeData"></treeMenu>
  </div>
</template>
<script>
  import treeMenu from './childIndex'
  export default {
    components: {
      treeMenu
    },
    data () {
      return {
        index: 0,
        treeData: [
          {
            code: '1',
            title: '菜单1',
            open: false,
            children: [
              {
                code: '10',
                title: '菜单1-1',
                open: false,
                children: [
                  {
                    code: '100',
                    title: '菜单1-1-1',
                    open: false,
                    children: []
                  },
                  {
                    code: '200',
                    title: '菜单1-1-2',
                    open: false,
                    children: []
                  }
                ]
              },
              {
                code: '20',
                title: '菜单1-2',
                open: false,
                children: [
                  {
                    code: '200',
                    title: '菜单1-2-1',
                    open: false,
                    children: []
                  }
                ]
              }
            ]
          },
          {
            code: '3',
            title: '菜单3',
            open: false,
            children: [
              {
                code: '30',
                title: '菜单3-1',
                open: false,
                children: [
                  {
                    code: '300',
                    title: '菜单3-1-1',
                    open: false,
                    children: []
                  },
                  {
                    code: '301',
                    title: '菜单3-1-2',
                    open: false,
                    children: []
                  }
                ]
              },
              {
                code: '31',
                title: '菜单3-2',
                open: false,
                children: [
                  {
                    code: '310',
                    title: '菜单3-2-1',
                    open: false,
                    children: []
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    methods: {
    }
  }
</script>

子组件

<template>
  <ul>
    <li v-for="(item, index) in treeList" :key="index">
      <div @click="openChild(item)">
        <span>[{
   
   {(item.open)?'-':'+'}}]</span>
        {
   
   {item.title}}
      </div>
      <div v-show="item.open">
        <treeMenu :tree-list="item.children" v-if="item.children.length > 0"></treeMenu>
      </div>
    </li>
  </ul>
</template>
<script>
  export default {
    name: 'treeMenu', // 必要属性
    props: {
      treeList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
      }
    },
    computed: {

    },
    methods: {
      // 控制展开与否
      openChild(item) {
        item.open = !item.open
      }
    }
  }
</script>

实现效果

简单的组件递归调用demo，希望对理解递归组件有帮助

猜你喜欢