vue项目的组件自递归

在vue项目中最常见的组件递归就是菜单和面包屑了,进行组件的自调用主要是的要被自调用的组件有一个name属性

  <div>
    <template v-for="item in treeData">
      <el-menu-item
        :index="item.id"
        v-if="!item.children"
        :key="item.id"
        :route="item.path"
        >{{ item.name }}</el-menu-item
      >
      <el-submenu :index="item.id" v-else :key="item.id">
        <template slot="title">{{ item.name }}</template>
        <!-- 这个组件就是调用组件,需要确保这个组件名称和本组件的name一致 这里如果组件name为驼峰模式,我们在定义组件的时候可以用中线进行切割使用-->
        <sub-menu :treeData="item.children"></sub-menu>
      </el-submenu>
    </template>
  </div>
</template>
<script>
export default {
  name: 'SubMenu', // 这个名字很重要,主要是通过这个名字找到要递归的组件
  props: ['treeData'],
  data() {
    return {}
  },
  created() {}
}
</script>
<style  scoped>
.children {
  padding-left: 10px;
}
</style>

下面我把路由定义一个js文件,我这里的菜单是读取的路由配置信息

    {
      path: '/',
      name: 'doc',
      id:"10001",
      component: Doc,
      children:[
        {
            path: '/pdf',
            name: 'Pdf',
            id:"10002",
            component: () => import(/* webpackChunkName: "about" */ '../views/Pdf.vue')
          }
      ]
    },

  ]