vue 如何使用递归组件


Posted in Javascript onOctober 23, 2020

有的时候我们会使用二级标题,什么叫做二级标题?
先看看传过来的数据。
类似于这种,数组中还有一个数组,有的人可能会说那就用两个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

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

以上就是vue 如何使用递归组件的详细内容,更多关于vue 使用递归组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
jquery实现页面加载效果
Feb 21 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 #Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 #Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
vue项目配置同一局域网可使用ip访问的操作
Oct 23 #Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 #Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 #Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python grpc超时机制代码示例
2020/09/14 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
汽车驾驶求职信
2013/10/25 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
校运会入场式解说词
2014/02/10 职场文书
《胡杨》教学反思
2014/02/16 职场文书
艺术教育实施方案
2014/05/03 职场文书
学生安全责任书模板
2014/07/25 职场文书
同事离别感言
2015/08/04 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL