VUE递归组件使用事例

2020/06/01 15:12
阅读数 83

概念:
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

之前在写组件时总有些疑惑,为什么export default导出的对象中有个name属性,今天看过递归组件之后,才发现这个name属性的一个比较重要的作用。(当然。name属性的还有其他的用处)。

用法:
1、首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。

既然要用递归组件,那么对我们的数据格式肯定是需要满足递归的条件的。就像下边这样,这是一个树状的递归数据。

 1 [
 2       {
 3         "name": "黄焖鸡米饭111111111",
 4         cList: [
 5           { "name": "二级黄焖鸡" },
 6           {
 7             "name": "one chicken",
 8             cList: [{ "name": '三级黄焖鸡3333', cList: [{ "name": "四级黄焖鸡" }] }]
 9           }
10         ]
11       },
12       { "name": "2222222222" },
13       {
14         "name": "黄焖鸡米饭33333333", cList: [
15           { "name": "二级黄焖鸡" },
16           { "name": "one chicken" }
17         ]
18       },
19     ]

接下来,我们就用这个树状数据,做一个简单版的树状菜单。树状菜单,也是递归组件最常用的方法之一。

实践案例:

首先,我们先创建一个tree组件,这个组件作为使用递归组件的父组件,我们来看下具体写法

 1 <template>
 2   <div>
 3     <my-trees :list="list"></my-trees>
 4   </div>
 5 </template>
 6 <script>
 7 import myTrees from './treeMenus'
 8 export default {
 9   components: {
10     myTrees
11   },
12   data () {
13     return {
14       list: [
15         {
16           name: '黄焖鸡米饭111111111',
17           cList: [
18             { name: '二级黄焖鸡' },
19             {
20               name: 'one chicken',
21               cList: [
22                 { name: '三级黄焖鸡3333', cList: [{ name: '四级黄焖鸡' }] }
23               ]
24             }
25           ]
26         },
27         { name: '2222222222' },
28         {
29           name: '黄焖鸡米饭33333333',
30           cList: [{ name: '二级黄焖鸡' }, { name: 'one chicken' }]
31         }
32       ]
33     }
34   },
35   methods: {}
36   
37 }
38 </script>

ok,可以看到,<my-trees />就是我们说的递归组件,当使用它时,只需要把上边我们定义好的数据通过props的方式传进去即可。

接下来,递归组件接收到了父组件传递的数据,就可以进行递归啦,我们来看下边的实现:

 1 <template>
 2   <ul>
 3     <li v-for="(item,index) in list " :key="index">
 4       <p>{{item.name}}</p>
 5       <tree-menus :list="item.cList"></tree-menus>
 6     </li>
 7   </ul>
 8 </template>
 9  <style>
10    ul{
11     padding-left: 20px!important;
12    }
13  </style>
14 <script>
15     export default{
16         name:'treeMenus',
17         props:{
18             list: Array
19         }
20     }
21 </script>

注意本文开头所说,name属性的使用(你可以把它当作从import导入了一个组件并注册,我们在temlpate可以使用<tree-menus></tree-menus>使用子组件自身进行递归了)

总结:
通过props从父组件拿到数据,递归组件每次进行递归的时候都会tree-menus组件传递下一级cList数据,(大家可以想象一下整个过程),整个过程结束之后,递归也就完成了,当然,这段代码只是简单的做了下递归组件的使用。对于折叠树状菜单来说,我们一般只会去渲染一级的数据,当点击一级菜单时,再去渲染一级菜单下的结构,如此往复。那么v-if就可以实现我们的这个需求,当v-if设置为false时,递归组件将不会再进行渲染,设置为true时,继续渲染。

最后也为大家准备了一个树状折叠菜单的递归组件实现方式,没有样式大家不要介意啦~

 1 <template>
 2  
 3   <ul>
 4     <li v-for="(item,index) in list" :key="index">
 5       <p @click="changeStatus(index)">{{item.name}}</p>
 6       <tree-menus v-if="scopesDefault[index]" :list="item.cList"></tree-menus>
 7     </li>
 8   </ul>
 9  
10 </template>
11  <style>
12 ul {
13   margin-top: 50px;
14   padding-left: 20px !important;
15 }
16 </style>
17 <script>
18 // import treeMenus from './treeMenu2.vue'
19 export default {
20   name: 'treeMenus',
21   props: {
22     list: Array
23   },
24   data() {
25     return {
26       scopesDefault: [],
27       scopes: []
28     }
29   },
30  
31   methods: {
32     changeStatus(index) {
33       console.log(index);
34       if (this.scopesDefault[index] == true) {
35         this.$set(this.scopesDefault, index, false)
36       } else {
37         this.$set(this.scopesDefault, index, this.scopes[index])
38       }
39     },
40     scope() {
41       this.list.forEach((item, index) => {
42         this.scopesDefault[index] = false
43         if ('cList' in item) {
44           this.scopes[index] = true
45           console.log(item, index)
46         } else {
47           this.scopes[index] = false
48         }
49       })
50       console.log(this.scopesDefault)
51     }
52   },
53   created() {
54     this.scope()
55   }
56 }
57 </script>

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部