vue 组件自己调用自己

在vue中有些情况下我们会用到组件本身来遍历出自己想要的效果。

其实非常简单，可以在模板中使用name属性值，来调用自己

<template>
  <el-submenu
    v-if="item.children && item.children.length >= 1" :index="'' + item.meta.index">     
    <template #title>      
      <i :class="item.meta.icon"></i>
      <span>{{ item.name }}</span>
    </template>
      <menu-tree
        v-for="item in item.children"
        :key="item.meta.index"
        :item="item"
      ></menu-tree>
  </el-submenu>
  <el-menu-item v-else-if="item.meta.hidden" :index="'' + item.meta.index">
    <i :class="item.meta.icon"></i>
    <template #title>
      <span>{{ item.name }}</span>
    </template>
  </el-menu-item>
</template>
<script>
export default {
  name:'menu-tree',
  props: {
    item: {
      default: [],
    },
  },
  data() {
    return {
    };
  }
}

这样就调用上啦