vue递归组件的使用

管理系统的菜单栏，相信大家都有见过，都免不了有一级二级......等等，层级是不确定的，是后台数据决定的，这时我们就要用到递归组件了。

首先我们来谈谈 组件的name属性：

1. 递归组件的调用；

2. keep-alive中使用include和exclude属性，包含或者排除指定name组件。

3. vue-devtools调试；

所以要使用递归组件，必须加上name属性，实现调用自身，使用递归时，我们要非常注意递归结束的条件，否则很容易陷入死循环，抛出错误: max stack size exceeded。

对于递归组件，往往数据会比较复杂，所以我们将递归逻辑抽离出来，作为一个单独的组件。’

首先父组件   menu.vue：

<template>
  <div class="home">
    <tree-menus :list="list"></tree-menus>
  </div>
</template>

<script>
import TreeMenus from '../components/treeMenus.vue';

export default {
  components: {
    TreeMenus,
  },
  data() {
    return {
      list: [
        {
          name: "一级菜单1",
          cList: [
            { name: "二级菜单1-1" },
            {
              name: "二级菜单1-2",
              cList: [
                { name: "三级菜单1-2-1", cList: [{ name: "四级菜单1-2-1-1" }] },
              ],
            },
          ],
        },
        { name: "一级菜单2" },
        {
          name: "一级菜单3",
          cList: [{ name: "二级菜单3-1" }, { name: "二级菜单3-2" }],
        },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>

子组件 （递归组件）treeMenus.vue

<template>
  <div class="myTree">
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <p>{{item.name}}</p>
        <div v-if="item.cList">
          <tree-menus :list="item.cList"></tree-menus>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "treeMenus",
  props: {
    list: Array,
  },
};
</script>

然后运行，来看看效果。

 用法比较简单，完结，撒花！