概念:
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 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>