递归组件的简单使用

递归组件

1.使用name属性作为组件名

2.有终止递归的条件

现在我们复习一下，Vue组件中的name属性有什么用处

第一，使用递归组件时作为组件名；

第二，用在keep-alive标签上的include,exclude属性

第三，devtools调试工具组件名称的显示

案例

递归组件使用的前提是要有一个可以递归的数据，否则使用递归组件毫无意义，所以它一般用来遍历树形结构的数据

// 原始数据
list: [
    {id:"01", name: "张大大", pid:"", job: "项目经理"},
    {id:"02", name: "小亮", pid:"01", job: "产品leader"},
    {id:"03", name: "小美", pid:"01", job: "UIleader"},
    {id:"04", name: "老马", pid:"01", job: "技术leader"},
    {id:"05", name: "老王", pid:"01", job: "测试leader"},
    {id:"06", name: "老李", pid:"01", job: "运维leader"},
    {id:"07", name: "小丽", pid:"02", job: "产品经理"},
    {id:"08", name: "大光", pid:"02", job: "产品经理"},
    {id:"09", name: "小高", pid:"03", job: "UI设计师"},
    {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
    {id:"11", name: "小华", pid:"04", job: "后端工程师"},
    {id:"12", name: "小李", pid:"04", job: "后端工程师"},
    {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
    {id:"14", name: "小强", pid:"05", job: "测试工程师"},
    {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]

首先我们对数据进行递归处理，使它变成树形结构的数据

arrToTree(list, pid) {
  const flag = list.filter(item => item.pid === pid);
  return flag.length === 0 ? [] : flag.map(i => {
    const obj = { name: i.name, children: this.arrToTree(list, i.id) };
    return obj.children.length === 0 ? { name: obj.name } : obj
  })
}

通过上面的函数就可以处理成树状的数据，这不是我们本节的重点，数据和结果可以自行测试

下面就要使用递归组件

<!--把处理后的树形结构传递给递归组件-->
<div id="app">
  <HelloWorld :list="list"/>
</div>

接着我们定义这个递归组件的逻辑

<template>
    <!--遍历第一层的对象-->
    <div v-for="i in list" :key="i.name">
    <!--给每个元素绑定点击事件，以便处理其他业务逻辑-->
      <div @click="clickFn(i,$event)">{{i.name}}</div>
      <!--判断上一级组件传递过来的数据有无children，没有就结束递归-->
      <div v-if="i.children" class="children-name">
      <!--hellworld为此组件的name属性，用于在模板template中使用，并把当前属性的children传给下一级-->
        <hello-world :list="i.children"></hello-world>
      </div>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    list: {
      type: Array
    }
  },
  methods: {
    clickFn(node, event){
      this.isShow = !this.isShow;
      event.target.children[0].style.display = this.isShow ? 'block' : 'none';
    }
  }
}
</script>

<style scoped>
  .children-name {
    margin-left: 50px;
    color: pink;
  }
</style>

效果展示

总结

综上所述，处理可递归的数据时，就可以使用递归组件，但是一定不要忘了结束递归。