有这样一个数组数据，实际或许有很多级。

tree: [
  {
    id: 1,
    name: '1',
    children: [
      { 
        id: 2, 
        name: '1-1', 
        children: [
          {
            id: 7, 
            name: '1-1-1',
            children: []
          }
        ]
      },
      { id: 3, name: '1-2' }
    ]
  },
  {
    id: 4,
    name: '2',
    children: [
      { id: 5, name: '2-1' },
      { id: 6, name: '2-2' }
    ]
  }
]

要烘托为下面这种树形

vue和uni-app的递归组件排坑

应该很容易想到运用递归组件，下面就来写一个tree组件。简单用vue2完成一下。

用法很简单

传入tree数据，支持回来当时点击的节点。

vue和uni-app的递归组件排坑

vue和uni-app的递归组件排坑

完成一下

先写一个tree组件，在components/tree/index.vue

<template>
  <div>
    <div 
      class="node" 
      v-for="node in data" 
      :key="node.id"
    >
      <tree-node 
        :node="node" 
        @node-click="nodeClick"
      >
      </tree-node>
    </div>
  </div>
</template>
<script>
  import treeNode from './tree-node.vue'
  export default {
    components: { treeNode },
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      nodeClick(node) {
        this.$emit('node-click', node)
      }
    }
  }
</script>

由于父组件页面中传进来的是个数组，需求先循环这个数组，然后递归烘托每一个子节点，我们就再写一个tree-node组件，专门用来烘托子节点，中心代码递归也是在这个组件中完成的。

同级目录写一个tree-node组件，在components/tree/tree-node.vue

<template>
  <div>
    <!-- 防止冒泡到父组件，要加.stop -->
    <div 
      class="node-name" 
      @click.stop="nodeClick"
    >
      {{node.name}}
    </div>
    <!-- 有children就遍历，递归烘托本身，把每一项传进去 -->
    <div 
      class="children" 
      v-if="node.children && node.children.length"
    >
      <tree-node 
        v-for="item in node.children" 
        :key="item.id" 
        :node="item" 
        v-on="$listeners"
      >
      </tree-node>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'tree-node',
    props: {
      node: Object
    },
    methods: {
      nodeClick() {
        // 由于传入当时组件的是每一级的节点
        // 只需求再传回去就好了
        this.$emit('node-click', this.node)
      }
    }
  }
</script>
<style scoped>
  .node-name {
    cursor: pointer;
  }
  .children {
    padding-left: 20px;
  }
</style>

划要点、抛出问题

  1. 递归的中心是自己调用自己，但要注意边界条件，否则会进入死循环，内存泄漏。对应到以上代码就是v-if="node.children && node.children.length"。
  2. 以上代码已经完成了递归烘托，但只是vue2的完成。你或许注意到其中有一个很重要的语句，v-on="$listeners"，如果不加会导致从第二层递归开始直到最底层，都无法运用emit向父组件传递事情，由于每一级节点的父组件都是本身，需求传给子组件一个事情，子组件才干运用emit调用。

那么还有其他办法解决以上问题吗

这就不得不说说uni-app和vue3了，趁便也说说uni-app和vue在递归组件这方面的不同点。

  1. uni-app和vue3移除了$listeners，那怎么解决呢？下面是不运用$listeners的做法，在v2、uni-app和v3中都适用，无非是v3运用了组合式api。注意看注释，有三个改动点：
<template>
  <div>
    <!-- 改动点1，当时节点数据经过点击事情传递 -->
    <div 
      class="node-name" 
      @click.stop="nodeClick(node)"
    >
      {{node.name}}
    </div>
    <div 
      class="children" 
      v-if="node.children && node.children.length"
    >
      <!-- 
        中心：改动点2，
        不再运用$listeners，
        每一级都传递一次node-click，
        运用nodeClick办法接纳参数
      -->
      <tree-node 
        v-for="item in node.children" 
        :key="item.id" 
        :node="item" 
        @node-click="nodeClick"
      >
      </tree-node>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'tree-node',
    props: {
      node: Object
    },
    methods: {
      // 改动点3，经过参数接纳数据
      nodeClick(node) {
        this.$emit('node-click', node)
      }
    }
  }
</script>
<style scoped>
  .node-name {
    cursor: pointer;
  }
  .children {
    padding-left: 20px;
  }
</style>
  1. 在vue中运用递归组件，无论v2仍是v3，都只需求设置一个name特点，即可直接调用，在uni-app中除了设置name特点，还需求运用import引进本身，并运用components注册组件。
// 引进本身
import treeNode from './tree-node.vue'
export default {
  name: 'tree',
  components: { treeNode },
  props: {
    node: Object
  },
  methods: {
  },
}