在 Vue3 中，组件可以通过递归的方式 自身渲染自身

最新推荐文章于 2025-03-25 08:00:00 发布
最新推荐文章于 2025-03-25 08:00:00 发布
阅读量1k 收藏 8
点赞数 20
文章标签： windows 前端 服务器 javascript vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhoumeina99/article/details/145871248
版权

这种模式通常用于处理树形结构数据（如菜单、评论、文件目录等）。Vue3 支持组件在其模板中直接引用自身，但需要注意递归的终止条件，以避免无限递归。

一、组件自身渲染自身的实现

1. 基本实现

  • 在组件模板中，直接使用组件自身的标签名。

  • 通过 name 属性定义组件名称，以便在模板中引用。

vue

复制

<template>
  <div>
    <p>{{ data.name }}</p>
    <ul v-if="data.children">
      <li v-for="child in data.children" :key="child.id">
        <!-- 递归渲染自身 -->
        <RecursiveComponent :data="child" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent', // 定义组件名称
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
};
</script>
2. 使用场景

  • 树形菜单：渲染嵌套的菜单项。

  • 评论系统：渲染嵌套的评论和回复。

  • 文件目录：渲染嵌套的文件夹和文件。

二、递归组件的关键点

1. 终止条件

  • 必须确保递归有终止条件，否则会导致无限递归和栈溢出。

  • 在上面的例子中，v-if="data.children" 是一个终止条件，当 data.children 为空时，递归停止。

2. 组件名称

  • 组件必须通过 name 属性定义名称，才能在模板中引用自身。

  • 如果使用 <script setup> 语法，可以通过文件名隐式定义组件名称。

3. 数据格式

  • 递归组件通常需要处理嵌套结构的数据，例如：

    json

    复制

    {
  "id": 1,
  "name": "Root",
  "children": [
    {
      "id": 2,
      "name": "Child 1",
      "children": []
    },
    {
      "id": 3,
      "name": "Child 2",
      "children": [
        {
          "id": 4,
          "name": "Grandchild 1",
          "children": []
        }
      ]
    }
  ]
}

三、完整示例

1. 递归组件

vue

复制

<template>
  <div>
    <p>{{ data.name }}</p>
    <ul v-if="data.children && data.children.length">
      <li v-for="child in data.children" :key="child.id">
        <RecursiveComponent :data="child" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent', // 定义组件名称
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
};
</script>
2. 使用递归组件

vue

复制

<template>
  <div>
    <h1>Tree Structure</h1>
    <RecursiveComponent :data="treeData" />
  </div>
</template>

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

export default {
  components: {
    RecursiveComponent,
  },
  data() {
    return {
      treeData: {
        id: 1,
        name: 'Root',
        children: [
          {
            id: 2,
            name: 'Child 1',
            children: [],
          },
          {
            id: 3,
            name: 'Child 2',
            children: [
              {
                id: 4,
                name: 'Grandchild 1',
                children: [],
              },
            ],
          },
        ],
      },
    };
  },
};
</script>

四、使用 <script setup> 语法

如果你使用 Vue3 的 <script setup> 语法，可以更简洁地实现递归组件：

1. 递归组件

vue

复制

<template>
  <div>
    <p>{{ data.name }}</p>
    <ul v-if="data.children && data.children.length">
      <li v-for="child in data.children" :key="child.id">
        <RecursiveComponent :data="child" />
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  data: {
    type: Object,
    required: true,
  },
});
</script>
2. 使用递归组件

vue

复制

<template>
  <div>
    <h1>Tree Structure</h1>
    <RecursiveComponent :data="treeData" />
  </div>
</template>

<script setup>
import RecursiveComponent from './RecursiveComponent.vue';

const treeData = {
  id: 1,
  name: 'Root',
  children: [
    {
      id: 2,
      name: 'Child 1',
      children: [],
    },
    {
      id: 3,
      name: 'Child 2',
      children: [
        {
          id: 4,
          name: 'Grandchild 1',
          children: [],
        },
      ],
    },
  ],
};
</script>

五、注意事项

  1. 性能问题：

    • 递归组件可能会导致性能问题，尤其是在数据嵌套层级很深时。

    • 可以通过虚拟滚动或懒加载优化性能。

  2. 终止条件：

    • 必须确保递归有终止条件，否则会导致无限递归。

  3. 组件名称：

    • 在模板中引用自身时，组件必须定义 name 属性。

  4. 数据格式：

    • 确保数据结构正确，避免因数据问题导致渲染错误。

六、总结

  • Vue3 支持组件通过递归方式渲染自身。

  • 递归组件适用于树形结构数据的渲染。

  • 需要定义终止条件，避免无限递归。

  • 可以使用 <script setup> 语法简化代码。

通过递归组件，可以轻松实现复杂的嵌套结构渲染！

如下是容器和折叠面板，拖拽组件，自动拖拽布局的代码示例：

<template>

  <Col v-bind="colPropsComputed" v-if="['grid', 'collapse'].includes(item.fieldTypeInnerKey)">

    <div

      :class="['box', activeId === (item.fieldId || item.id) ? 'active-form-item' : '']"

      :style="{ width: item.fieldWidth ?? '50%' }"

      @click.stop="emits('activeItem', item)"

    >

      <Row class="grid-row" v-bind="item.componentProps" v-if="'grid' === item.fieldTypeInnerKey">

        <Col

          class="grid-col"

          v-for="(colItem, index) in item.children"

          :key="index"

          :span="Number(colItem.fieldWidth)"

        >

          <draggable

            class="drawing-board draggable-box"

            :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"

            v-bind="{

              group: 'componentsGroup',

              animation: 340,

            }"

            item-key="fieldName"

            v-model="colItem.children"

          >

            <template #item="{ element }">

              <LayoutItem

                :drawing-list="drawingList"

                :item="element"

                :active-id="activeId"

                :form-rule="formRule"

                :inner-key="innerKey"

                :isDisabled="isDisabled"

                v-bind="$attrs"

                @delete-item="emits('deleteItem', $event)"

                @delete-grid="emits('deleteGrid', $event)"

                @active-item="emits('activeItem', $event)"

                @change-item="(key, val) => emits('changeItem', key, val)"

                @is-required="(id, k) => emits('isRequired', id, k)"

                @is-read="(id, k) => emits('isRead', id, k)"

              />

            </template>

          </draggable>

        </Col>

      </Row>

      <Collapse default-active-key="1" v-if="'collapse' === item.fieldTypeInnerKey">

        <CollapsePanel key="1" :header="item.displayName">

          <div :class="['collapse-box']" :style="{ width: item.fieldWidth ?? '50%' }">

            <draggable

              class="drawing-board draggable-box"

              :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"

              v-bind="{

                group: 'componentsGroup',

                animation: 340,

              }"

              item-key="fieldName"

              v-model="item.children"

            >

              <template #item="{ element }">

                <LayoutItem

                  :drawing-list="drawingList"

                  :item="element"

                  :active-id="activeId"

                  :form-rule="formRule"

                  :inner-key="innerKey"

                  :isDisabled="isDisabled"

                  v-bind="$attrs"

                  @delete-item="emits('deleteItem', $event)"

                  @delete-grid="emits('deleteGrid', $event)"

                  @active-item="emits('activeItem', $event)"

                  @change-item="(key, val) => emits('changeItem', key, val)"

                  @is-required="(id, k) => emits('isRequired', id, k)"

                  @is-read="(id, k) => emits('isRead', id, k)"

                />

              </template>

            </draggable>

          </div>

        </CollapsePanel>

      </Collapse>

      <Operate :isDisabled="isDisabled" :item="item" @delete-item="emits('deleteGrid', item)" />

    </div>

  </Col>

  <draggable-item

    v-else

    v-bind="$attrs"

    :drawing-list="drawingList"

    :item="item"

    :active-id="activeId"

    :form-rule="formRule"

    :inner-key="innerKey"

    :isDisabled="isDisabled"

    @delete-item="emits('deleteItem', $event)"

    @active-item="emits('activeItem', $event)"

    @change-item="(key, val) => emits('changeItem', key, val)"

    @is-required="(id, k) => emits('isRequired', id, k)"

    @is-read="(id, k) => emits('isRead', id, k)"

  />

</template>

<script lang="ts" setup name="LayoutItem">

  import { computed, defineComponent, PropType, reactive, toRefs } from 'vue';

  import draggable from 'vuedraggable';

  import DraggableItem from './DraggableItem.vue';

  import Operate from './Operate.vue';

  import { Row, Col, Collapse, CollapsePanel } from 'ant-design-vue';

  const props = defineProps({

    item: {

      type: Object as PropType<any>,

      default: () => ({}),

    },

    formRule: {

      type: Object as PropType<any>,

      default: () => ({}),

    },

    drawingList: {

      type: Object as PropType<any>,

      default: () => ({}),

    },

    activeId: {

      type: String as PropType<string>,

      default: '',

    },

    innerKey: {

      type: String as PropType<string>,

      default: '',

    },

    isDisabled: Boolean,

  });

  const emits = defineEmits([

    'deleteGrid',

    'dragStart',

    'handleColAdd',

    'handle-copy',

    'handle-delete',

    'deleteItem',

    'activeItem',

    'changeItem',

    'isRequired',

    'isRead',

  ]);

  const colPropsComputed = computed(() => {

    const { colProps = { span: 24 } } = props.item;

    return colProps;

  });

</script>

zhoumeina99
关注
【Vue3 第十三章】动态组件 & 递归组件 & 组件别名
前端知识分享喵
01-10 1834
动态组件 & 递归组件 & 组件别名定义
Vue一个案例引发的递归组件的使用详解
10-17
主要介绍了Vue一个案例引发的递归组件的使用，本文主要给大家展示如何在项目中使用递归组件，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue.js的组件递归：实现组件的嵌套调用
最新发布
你若盛开，清风自来
03-25 993
🤍 前端开发工程师、技术日更博主、已过CET6🍨、23年度博客之星前端领域TOP1🕠高级专题作者、打造专栏🍚签约作者、上架课程。
Vue3 递归组件
weixin_39415598的博客
03-09 1613
本文简介 点赞 + 关注 + 收藏 = 学会了 在日常 Vue 项目中，大概率会用组件库辅助开发，所以 递归组件 的出镜率可能不会非常高。但这并不代表 递归组件 不重要。 本文用10分钟左右的时间让你掌握 递归组件 的用法。 在此之前，你必须掌握：html + css + js + Vue3 基础用法，至少需要知道 Vue 组件 是什么。 用法讲解 在讲解 递归组件 之前，我们需要先了解几个概念。...
【Vue3】递归组件
小秀的博客
07-29 2663
子组件Tree.vueitem . name } } < / span > // 1.模板自定义名称 直接使用文件名当做递归组件的名称 Tree < Tree v - if = "item?.children?: Tree [ ] } // // 3.模板自定义名称 利用defineOptions // defineOptions({ // name: 'nihao' // }) defineProps < {data?
vue3：递归组件
大香蕉的博客
04-16 5656
vue3中可以直接使用组件文件名来递归组件，常用于页面菜单树的开发 效果图 父组件 <template> <Tree @tree-click="treeClick" :data="data"></Tree> </template> <script setup lang="ts"> import Tree from '@/components/treeItem.vue'; import { reactive } from 'vu..
vue3中组件递归
qq_43600406的博客
05-27 633
背景：从零搭建一套后台管理系统时，需要递归的将侧边菜单渲染出来。UI框架：Element-Plus。
Vue2递归组件实现树形菜单
08-30
Vue组件需要有一个名称，以便在模板中引用自身。在本例中，组件名为`ggg`。组件的`template`属性定义了DOM结构，包括如何展示当前层级的文本以及如何递归地展示下一层级的数据。 ```javascript ggg: { name: &#39;gs&#39;,...
vue 如何使用递归组件
01-21
递归组件：在组件的自身再调用组件的自身。 组件一般要给个名字，方便我们使用递归组件的时候来使用，如果我自身有children，就把children当做list再传给自己，做一个递归的循环。 此时就渲染出来了。 如果我再...
【Vue.js 3.0】递归组件实现思路
day day up
03-27 636
创建的一个组件，这个组件在其模板内部会递归地调用自己，从而实现无限嵌套或树形结构的渲染。
Vue 3 第十八章：组件六（递归组件）
to_the_Future的博客
05-03 6025
在 Vue3 中使用递归组件非常简单，只需要在组件的 template 中调用自身即可。递归组件在开发中非常有用，可以帮助我们处理无限级别的树形结构等复杂场景
vue3 组件递归组件
好川的博客
02-15 3321
vue 组件递归组件
【Vue3】组件递归
随便写写
09-01 1175
【Vue3】组件递归
Vue3递归组件
qq_46051205的博客
01-09 1368
Vue进阶 递归组件 Vue3
vue3 中递归组件
weixin_40228600的博客
01-31 240
【代码】vue3 中递归组件。
vue3:使用插件递归组件
TS_144636的博客
11-21 396
【代码】vue3:使用插件递归组件。
前端-Vue3递归组件&自定义Tree
小左的博客
02-27 1796
PS：子集不处理事件，无限向上抛出，最后有父级处理。// 增加选中事件});// 子集向上抛出事件Tree 组件// 增加绑定选中事件},// 定义v-model绑定的参数type: [],});// 保存全部选中的节点// 值更新抛出事件// 节点是否选中，选中数组新增，取消选中数组删除} else {// 绑定值更新。
vue3使用递归组件渲染层级结构
weixin_42234899的博客
07-25 761
vue3使用递归组件渲染层级结构
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值