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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
解决layer.prompt无效的问题
Sep 24 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
求PHP数组最大值,最小值的代码
2011/10/31 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
input标签内容改变的触发事件介绍
2014/06/18 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
详解Angular4 路由设置相关
2017/08/26 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
python和C语言混合编程实例
2014/06/04 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python 项目转化为so文件实例
2019/12/23 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
西部世纪面试题
2014/12/05 面试题
英语教师岗位职责
2014/03/16 职场文书
大学生就业求职信
2014/06/12 职场文书
长城导游词400字
2015/01/30 职场文书
计划生育工作总结2015
2015/04/03 职场文书
建党伟业观后感
2015/06/01 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL