vue-------实现递归组件

Z_BL

已于 2025-01-10 11:49:01 修改

阅读量536

点赞数 3

文章标签： vue.js javascript 前端

于 2024-03-31 09:32:28 首次发布

本文链接：https://blog.youkuaiyun.com/Z_B_L/article/details/137191332

版权

在 Vue 中实现递归组件

递归组件是一种非常有用的技术，尤其适用于树形结构数据的渲染。比如，我们希望通过一个递归组件来展示一个多层次的树形菜单或目录结构。下面，我们将演示如何在 Vue 3 中创建一个递归组件。

场景描述

假设我们有一个多层级的树形数据结构，并希望通过复选框来展示树的每一项，同时允许每个节点有子节点。我们将通过递归组件来渲染这个结构，保证代码的简洁和可维护性。

父组件：传递树形数据

在父组件中，我们首先定义一个树形数据结构，并通过 Tree 组件来渲染这个数据。

父组件:

<template>
  <div>
    <!-- 使用 Tree 组件展示树形结构 -->
    <Tree :data="data"></Tree>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import Tree from '@/components/Tree.vue';

// 定义树形数据结构
const data = reactive([
  {
    name: "1",
    checked: true, // 默认选中
    children: [
      {
        name: "1-1",
        checked: false, // 默认未选中
        children: [
          { name: "1-1-1", checked: true },
          { name: "1-1-2", checked: false }
        ]
      },
      {
        name: "1-2",
        checked: true
      }
    ]
  }
]);
</script>

在父组件中，我们创建了一个名为 data 的树形数据，它是一个 reactive 对象，意味着当数据发生变化时，视图会自动更新。树形结构包含了多个节点，每个节点有 name 和 checked 属性，表示节点的名称和是否选中。某些节点还有 children 属性，表示子节点。

子组件：递归渲染树形数据

在子组件中，我们将实现递归渲染逻辑。具体而言，我们会遍历当前节点数据，渲染每个节点的复选框。如果某个节点有子节点（即 children 属性存在），我们将递归地渲染 Tree 组件，继续渲染子节点。

子组件:

<template>
  <div class="tree" v-for="item in data" :key="item.name">
    <!-- 渲染复选框 -->
    <input v-model="item.checked" type="checkbox" />
    <span>{{ item.name }}</span>

    <!-- 如果有子节点，递归渲染子节点 -->
    <Tree v-if="item?.children?.length" :data="item?.children"></Tree>
  </div>
</template>

<script setup>
// 获取父组件传递的数据
let props = defineProps({
  data: Array, // 接收父组件传递的数据
});
</script>

在子组件中，我们首先通过 v-for 指令遍历 data 数组，渲染每个节点。每个节点都包含一个复选框，复选框的选中状态与 item.checked 双向绑定。这样，当用户勾选或取消勾选复选框时，数据会即时更新。

然后，我们使用 v-if="item?.children?.length" 判断当前节点是否有子节点。如果当前节点有子节点，则递归渲染 Tree 组件并将子节点数据传递给它。这样，Tree 组件就会继续渲染子节点，直到没有更多的子节点为止。