Vue递归组件

子组件
<template>
  <div>
    <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: {
		type: Array,
		default: []
	},
  },
};
</script>

父组件
<template>
  <div>
    <tree-menus :list="list"></tree-menus>
  </div>
</template>
 
<script>
import treeMenus from './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" }],
        }
      ]
    }
  }
}
</script>