vue组件自调用

组件自调用

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

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

<template>
  <el-submenu v-if="item.children && item.children.length" :index="item.name" v-auth="item.authority">
    <template slot="title"><i :class="item.icon" style="color: #ffffff"></i><span>{{ item.label }}</span></template>
    <XnMenuItem v-for="child in item.children" :key="child.name" :item="child"></XnMenuItem>
  </el-submenu>
  <el-menu-item v-else :index="item.name" @click="jumpTo(item)" v-auth="item.authority"><i :class="item.icon"></i><span slot="title">{{ item.label }}</span></el-menu-item>
</template>

<script>
export default {
  name:'XnMenuItem',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  methods: {
    jumpTo(data) {
      this.$router.push({ name: data.name })
    },
  },
}
</script>