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>

巴特西

vue组件自调用

组件自调用

最新文章

热门文章