vue实现一个最简单的递归组件Tree

# vue

Wednesday , 2022-1-12 17:49

递归组件最简单的理解就是：组件自己调用自己，不断循环到条件结束，最典型的应用就是树状图，以下记录一下最简单的实现过程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

//demo.vue

<template>
  <div class="home">
    <Child v-for="(item, index) in treeData" :data="item" :key="index"/>
  </div>
</template>

<script>
  import Child from './Child.vue';
  export default {
    data() {
      return {
        treeData: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1',
              children: [{
                label: '四级 1-1-1-1'
              }]
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//Child.vue

<template>
  <div class="box">
    <b @click="show=!show">{{data.label}}</b>
    <div class="item" v-show="show" v-if="data.children">
      <Child v-for="(item,index) in data.children" :data="item" :key="index"/>
    </div>
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name:"Child", //这里注意组件名要定义，才能递归引用
    props:['data'],
    data() {
      return {
        show:false
      }
    }
  }
</script>

简单的实现了点击隐藏显示的功能，实现后大概的效果如下：

image.png

可扩展的点还是很多，比如异步请求加载，禁用启用之类的，都可以在这个基础上加入。