Vue3递归组件的魅力与应用

一、什么是递归组件

在Vue3中，递归组件是指自身作为子组件出现在模板中的情况。这种组件设计模式十分灵活，可以处理具有层级结构的数据或需要无限嵌套的组件。

二、如何使用递归组件？

// ParentComponent.vue
<script setup lang="ts">
import RecursiveComponent from "@/views/RecursiveComponent/RecursiveComponent.vue";
import { reactive } from "vue";
interface ITreeData {
  id: number;
  name: string;
  checked: boolean;
  children: ITreeData[];
}
const treeData = reactive<ITreeData[]>([
  {
    id: 1,
    name: "根节点1",
    checked: false,
    children: [
      {
        id: 2,
        name: "节点1",
        checked: false,
        children: [
          {
            id: 3,
            name: "节点1.1",
            checked: false,
            children: [],
          },
          {
            id: 4,
            name: "节点1.2",
            checked: false,
            children: [],
          },
        ],
      },
      {
        id: 5,
        name: "节点2",
        checked: true,
        children: [],
      },
    ],
  },
  {
    id: 6,
    name: "根节点2",
    checked: false,
    children: [
      {
        id: 7,
        name: "节点1",
        checked: false,
        children: [
          {
            id: 8,
            name: "节点1.1",
            checked: false,
            children: [],
          },
        ],
      },
    ],
  },
]);
</script>

<template>
  <recursive-component :treeData="treeData" />
</template>

<style scoped></style>




//RecursiveComponent.vue
<template>
  <div
    @click.stop="handleTreeNode(item)"
    class="recursive"
    v-for="item in treeData"
    :key="item.id"
  >
    <input type="checkbox" :checked="item.checked" />
    {{ item.name }}
    <recursive-component v-if="item.children.length" :treeData="item.children" />
  </div>
</template>
	

<script setup lang="ts">
	interface ITreeData {
	  id: number;
	  name?: string;
	  checked?: boolean;
	  children?: ITreeData[];
	}
	import { ref, reactive } from "vue";
	
	defineProps<{
	  treeData: ITreeData[];
	}>();
	
	const handleTreeNode = (val) => {
	  console.log(val, "当前树节点数据");
	};
</script>
<style scoped lang="scss"
	.recursive {
	  margin-left: 10px;
	}
</style>

在上述代码中，我们在父组件中使用了递归组件RecursiveComponent。通过传入一个树形数据结构treeData，递归组件会根据数据的层级关系进行递归渲染，直到遍历完所有的子节点。

效果图如下：

注意：递归组件recursive-component的名称需要和文件名一致。若不一致你可以多写一个script带上name,并用name来表示

三、递归组件的应用场景

递归组件在处理具有层级结构的数据时非常有用。例如，在实现评论列表、文件目录树或多级菜单时，递归组件能够轻松应对。

此外，递归组件还可以用于处理复杂的组件嵌套场景。例如，在实现一个拖拽排序的列表时，每个列表项都可以使用递归组件，使得列表的嵌套结构变得非常灵活和易于维护。

四、总结

通过使用Vue3中的递归组件，我们可以轻松地处理无限层级的嵌套结构。递归组件是处理树形结构或其他递归定义数据结构的理想选择。希望本文能够帮助你理解并使用Vue3中的递归组件。