VUE递归树形实现多级列表

下面是“VUE递归树形实现多级列表”的完整攻略。

1. 理解递归树形结构

递归树形结构，是指一个树形结构中包含了许多子树，而每个子树中又可能包含有更多的子树，这样的结构就可以使用递归来描述。

2. 实现递归组件

在 Vue 中实现递归树形结构，需要定义一个递归组件。递归组件是指在组件的模板中再次使用相同的组件，从而形成递归结构。

假设我们要实现一个无限级列表，并且这个列表的每一项都可能包含有子列表，那么可以定义一个名为tree-list的组件用于渲染这个列表，这个组件的定义如下：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
        <tree-list :list="item.children" v-if="item.children" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeList',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

在组件的模板中，我们使用了v-for指令渲染了每个列表项，同时判断了当前项是否有子列表，如果有的话就再次渲染tree-list组件，从而形成递归结构。

3. 父子组件之间的通信

在递归组件中，父组件需要向子组件传递数据，子组件也需要向父组件传递数据。这一过程可以通过属性(prop)和事件(event)来实现。

例如，当用户点击某一项时，我们想要在父组件中输出当前项的名称，那么就需要在子组件中定义一个点击事件，并在该事件中触发父组件定义的事件，代码如下所示：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="handleItemClick(item.name)">
        {{ item.name }}
        <tree-list :list="item.children" v-if="item.children" @item-click="handleItemClick" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeList',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleItemClick(name) {
      this.$emit('item-click', name);
    },
  },
};
</script>

在子组件中，我们使用了$emit方法触发了父组件中定义的item-click事件，并且将当前项的名称作为参数传递给了父组件。

在父组件中，定义了一个handleItemClick方法，用于输出当前项的名称：

<template>
  <div>
    <tree-list :list="list" @item-click="handleItemClick" />
  </div>
</template>

<script>
import TreeList from './TreeList.vue';

export default {
  name: 'App',
  components: {
    TreeList,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: '节点 1',
          children: [
            {
              id: 11,
              name: '节点 1-1',
              children: [
                {
                  id: 111,
                  name: '节点 1-1-1',
                },
                {
                  id: 112,
                  name: '节点 1-1-2',
                },
              ],
            },
            {
              id: 12,
              name: '节点 1-2',
              children: [
                {
                  id: 121,
                  name: '节点 1-2-1',
                },
                {
                  id: 122,
                  name: '节点 1-2-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          name: '节点 2',
          children: [
            {
              id: 21,
              name: '节点 2-1',
            },
            {
              id: 22,
              name: '节点 2-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleItemClick(name) {
      console.log(`当前项的名称是：${name}`);
    },
  },
};
</script>

在父组件中，我们引用了tree-list组件，并监听了它的item-click事件，当事件触发时会调用handleItemClick方法，并且将当前项的名称作为参数传递给了该方法。

通过这样的方式，父子组件之间实现了通信，并且可以传递数据和事件。