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 相关文章推荐
js 浏览器事件介绍
Mar 30 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
vue 单页应用和多页应用的优劣
Oct 22 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实现httpRequest的方法
2015/03/13 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
详解 Python 与文件对象共事的实例
2017/09/11 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python遍历小写英文字母的方法
2019/01/02 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python坐标线性插值应用实现
2019/11/13 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
公务员的自我鉴定
2013/10/26 职场文书
学校清明节活动总结
2014/07/04 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
手术室护士个人总结
2015/02/13 职场文书
未中标通知书
2015/04/17 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android