vue递归组件

<template>
  <div>
  <el-menu router unique-opened>
    <el-submenu
    :index="index + ''"
    v-for="(obj, index) in data"
    :key="obj.name"
    >
    <template slot="title">
      <router-link
      :to="obj.path === '/' || obj.path === '/appraise' ? obj.path : ''"
      >
      <i :class="obj.meta.icon"></i>
      <span>{{ obj.meta.title }}</span>
      </router-link>
    </template>
    <div v-for="data in obj.children" :key="data.name">
      /* data.meta.show 是用来判断路由是否在左侧导航显示的 */
      <el-menu-item-group v-if="data.meta.show">
      <el-menu-item :index="`${obj.path}/${data.path}`">{{
        data.meta.title
      }}</el-menu-item>
      <Deep-component
        v-if="data.children"
        :data="data.children"
      ></Deep-component>
      </el-menu-item-group>
    </div>
    </el-submenu>
  </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'DeepComponent',
  props: {
  data: {
    type: Array,
    default: [],
  },
  },
  name: 'DeepComponent',
  computed: {
  ...mapState(['routes']),
  },
}
</script>```