vue如何使用递归组件

文章详情

有的时候我们会使用二级标题,什么叫做二级标题?
先看看传过来的数据。
类似于这种,数组中还有一个数组,有的人可能会说那就用两个v-for嵌套使用啊,但是这里,我们想要它们是同样的功能,同样的样式,所以使用递归组件是最好的选择。

递归组件:在组件的自身再调用组件的自身。

vue如何使用递归组件

组件一般要给个名字,方便我们使用递归组件的时候来使用,如果我自身有children,就把children当做list再传给自己,做一个递归的循环。

vue如何使用递归组件

此时就渲染出来了。

vue如何使用递归组件

如果我再增加一个children呢?像这样:

vue如何使用递归组件

此时不用做任何事,只改变了数据结构,去看浏览器渲染的页面:

vue如何使用递归组件

三级标题就出来了,而我们只修改了数据结构,模板处没有动任何地方。
这就是递归组件的使用,只要children存在,就调用自身。
如果用v-for来写,可能还要写一层循环。

tips 关于name的一些使用

每一个组件内的name值到底是做什么用的呢?

1. 当我们做递归组件会用到
2.在页面上想对某个页面取消缓存,keep-alive exclude="xxname"
3.Vue的开发者调试工具,会显示一个个组件名,取决于这个name

我目前所知大概就是这些用途了,以后发现了新的用途会再更新的。

版权:版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 70068002@qq.com 举报,一经查实,本站将立刻删除。

转载请注明出处:https://www.stntk.com/2418.html

相关推荐
JS前端模拟Excel条件格式实现数据条效果
需求背景 最近业务中遇到一个有意思的需求,是要在现有的表格中实现类似 Excel 中的数据条的效果,在数据比较多的时候单纯看表格里的数字会比…
头像
前端开发 2024-05-26
962
js 实现汉字简体和繁体之间的互相转换
简体字 简体字(Simplified Chinese,简体中文),是中国大陆地区目前在用的字体,由官方公布的简体字,主要由传承字以及1950…
头像
前端开发 2024-05-26
747
如何使用nginx配置代理多个前端资源?
背景 两套不同的前端使用同一个后端服务,前端使用的Nginx代理的dist包 前端 vue+elementui 后端 Python+flas…
头像
前端开发 2024-05-26
613
jquery实现ul列表中点击li选择radio
如何利用jquery实现ul列表中点击li选择radio呢? 1、HTML代码 <ul class="list-group"> …
头像
前端开发 2024-05-26
1,166
vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
公司UI设计的拟态框弹窗跟Element Plus UI的布局不太一致。导致不能够直接修改样式得到想到样式。直接上图。 这个需求最主要的是要…
头像
前端开发 2024-05-26
1,167
前端如何实现网页变灰功能?
今天来从前端的角度看看网页置灰是如何实现的,以及相关使用技巧! 实现思路 先来看看一些主流网站是如何实现置灰的: BiliBili: 京东 …
头像
前端开发 2024-05-26
871
发表评论
暂无评论

还没有评论呢,快来抢沙发~

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

70068002@qq.com

扫描二维码

关注微信公众号