vue递归组件的用法

废话不多说直接上代码

组件

copy

<template>
  <ul>
    <li v-for="(item,index) in list " :key="index">
      <p>{{item.name}}</p>
      <treeMenus :list="item.children"></treeMenus>
    </li>
  </ul>
</template>
<script>
export default {
  name: "treeMenus",
  props: {
    list: Array
  }
};
</script>
<style>
    ul {
    padding-left: 20px !important;
    }
</style>

调用

copy

<!-- html调用 -->
<treeMenus :list="treeMenusData"></treeMenus>
 
 
treeMenusData: [ // 数据格式
  {
    name: "菜单1",
    children: [
      {
        name: "菜单1-1",
        children: []
      }
    ]
  }
]

原理

在HTML里面调用treeMenus组件并传入list数组数据，在treeMenus组件主键里面调用自己，实现递归