vue组件递归（组件内引入自己）

最新推荐文章于 2025-05-03 07:47:18 发布
最新推荐文章于 2025-05-03 07:47:18 发布
阅读量2.1k 收藏
点赞数 2
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/start_sea/article/details/119960781
版权
本文介绍了在Vue项目中如何实现组件的递归使用，通过在组件内部引用自身来创建动态结构。首先，为组件设置name属性，然后在组件模板中直接使用同名标签实现递归。注意避免与关键字冲突。这种技术在构建自定义树形结构或无限滚动列表时非常有用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue组件递归（组件内引入自己）

今天看到大佬在vue项目中有个写法，在组件引用自身，一时觉得神奇，从未用到过，今天记录下。
1、现在组件内export default {}中设置好name值。
在这里插入图片描述

2、组件内引用是直接使用同名标签

在这里插入图片描述
name命名时注意与关键字同名。

如果对你有帮助，记得点赞噢（~~）

start_sea
关注
【Vue3 第十三章】动态组件 & 递归组件 & 组件别名
前端知识分享喵
01-10 1847
动态组件 & 递归组件 & 组件别名定义
vue component组件内部自己引用自己
肖肖肖丽珠的博客
07-02 7679
我曾经写过的一篇文章用过子组件里面自己引用自己 element-ui的表格。表头和表格数据都是接口动态给的。多级表头。如何写呢？ MyColumn.vue <template> <el-table-column :prop="titledata.values" :label="titledata.label" align="left"> <template v-if="titledata.children.length"> ...
VUE 组件中自己调用自己
Erek的前端博客；
11-01 5933
VUE 组件中自己调用自己, 父组件 ( 正常引入调用 ), 子组件 ( 组件中需定义name名称 )
vue2.x 递归组件
最新发布
monian187的博客
05-03 318
vue2.x 递归组件
Vue组件中调用自己
m0_73087260的博客
12-26 477
1‌. 递归组件‌：这是最常见和有效的方式。通过在组件的模板中引用自身，可以实现递归渲染。‌2. 使用ref引用组件实例‌：通过在组件上使用ref属性，可以在组件的方法中通过this.$refs访问并调用自身。这种方式允许组件在模板中嵌套自身，实现树状结构的渲染‌。这种方式适用于需要在特定时机调用自身方法的场景‌。
vue组件如何自己调用自己（组件递归）
m0_70547044的博客
10-13 5382
在做侧边栏导航动态加载时，需要用到vue的组件递归，最开始打算直接写函数递归来解决问题，结果没什么卵用，越写越复杂。注意不要在组件内定义vue.components，否则会报错。直接在组件中调用即可。
vue中组件调用自己，怎么实现
weixin_44709363的博客
09-26 989
子组件在被调用时，不再引入组件和注入组件，但组件的name属性值是必写项，它要与自定义的组件元素名称保持一致。
Vue2递归组件实现树形菜单
11-26
今天看了老长时间递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。 效果如下图，点击后打开二级菜单，再点击后打开三级。 //js //引子 //思想：当v-if=...
vue组件递归自己报错，本地使用正常
nackerhuang的博客
08-18 656
组件本地使用正常，上传到npm后其他项目使用时报错：Failed to mount component: template or render function not defined 出问题的地方在组件递归调用自己时，代码如下： 在Menus组件内递归调用Menus，其他项目通过 npm i vue-contextmenus安装调用。 待页面展示二级目录时报错 后经测试，发现一个临时解决方案，暂时没找到合理的解释， 如果有大佬知道还请告知《nacker1@qq.com》,感激不尽。 解.
Vue学习记录之八（局部组件,全局组件,递归组件,动态组件）
LvManBa的博客
09-23 970
上面我们直接使用了文件名，如果感觉突兀，也可以自定义，在子组件中，新建一组script代码。--递归体使用自定义的LvmanbaTreedatas?--递归体使用自定义的LvmanbaTreedatas?--递归体使用自定义的LvmanbaTreedatas?--递归体使用自定义的LvmanbaTreedatas?--递归体使用自定义的LvmanbaTreedatas?--递归体使用自定义的LvmanbaTreedatas?--递归体使用自定义的LvmanbaTree。
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
10-14
总之，解决Vue组件未显示的问题，需要从组件注册、模板结构、命名规则、数据绑定和生命周期等多个角度进行排查。记住，Vue的错误信息通常很清晰，如果出现了问题，它会给出明确的提示。如果没有错误信息，那么很可能...
vue3 组件自己引用自己 递归组件 组件命名
weixin_39823006的博客
03-08 6582
vue3 递归组件 组件重命名
【笔记】vue3.x 组件引用自身
咫尺天涯的专栏
08-30 3417
在开发过程中，遇到了组件引用自身的情况，在此记录一下需要注意的问题。 如何引用 需要给组件设置name，然后在模板中直接引用即可。 <template> <example-component></example-component> </template> export default { name: 'ExampleComponent' } 可能遇到的问题 控制台警告 [Vue warn]: Extraneous non-emits ev.
vue3中组件中调用自己
weixin_45535843的博客
06-28 1321
【代码】vue3中组件中调用自己。
Vue3.0 引用自定义组件
lg24k的博客
01-17 924
vue 3.0 自定义组件的引用
Vue学习记录：自定义组件内部引用当前组件
shenxiang123的博客
04-12 867
自定义组件内用引用当前组件的方法
vue引入自己定义的组件使用
m0_49016709的博客
10-16 2872
vue中定义自己的经常使用的组件，然后在需要的地方引入使用是很方便的。 自己定义和使用 一共分四步 1、选定文件夹创建一个组件。 2、在upLoad中写你需要的内容。 3、在你需要的地方引入组件， 4、在引入页面声明 5、使用 对照着你写的组件，创建到使用走完这五个步骤就可以了。 ...
Vue组件如何调用自身
m0_56274171的博客
03-03 2253
由于树是一个递归的数据结构,必须要对自身组件的递归调用 我们只需要给组件指定 name 属性,即可以在组件内部使用 <template> <div> <item></item> </div> </template> <script> export default { name: "item", ... }; </script> <style></st
单文件组件 | Vue.js
热爱科学、文人、计算机
11-23 366
单文件组件 | Vue.js
Vue组件递归实现树形视图数据展示
"Vue 实现树形视图数据功能，通过递归组件渲染层次结构" 在 Vue 中，创建树形视图数据功能是一项常见的任务，它通常用于展示具有层级关系的数据，例如文件系统、组织结构等。这个示例提供了一个简单的方法来实现这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值