赞
踩
知识点:组件可以自身引用,采用该方法可以通过条件判断完成递归调用。
element组件:NavMenu 导航菜单 el-submenu el-menu-item
一、新建组件,方便递归调用。
1.template
- <template>
- <div>
- <template v-for="item in data">
- <template v-if="item.child && item.child.length > 0">
- <el-submenu :key="item.id" :index="item.id">
- <template slot="title">
- <span @click="showContent(item)">{{ item.name }}</span>
- </template>
- <Moduletree :data='item.child'></Moduletree>
- </el-submenu>
- </template>
- <template v-else>
- <el-menu-item :key="item.id" :index="item.id">
- <i class="el-icon-menu"></i>
- <span slot="title" @click="showContent(item)">{{ item.name }}</span>
- </el-menu-item>
- </template>
- </template>
- </div>
- </template>
2.script
- <script>
- export default {
- name: 'BdjwPlanWebModuletree',
-
- data() {
- return {
-
- };
- },
- //这里是要接受的参数,从父组件发送
- props:['data'],
- mounted() {
-
- },
-
- methods: {
-
- },
- };
- </script>
组件已经完成。
二、父组件传值
1.父组件引入
import Tree from '../programmer/component/moduleTree.vue'
2.在script中注册
- components:{
- Tree
- },
3.调用,开始循环
<Tree :data='goal'></Tree>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。