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插件开发方法(初学者)
Feb 03 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
详解vue路由
Aug 05 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 可阅读随机字符串代码
2010/05/26 PHP
php计算税后工资的方法
2015/07/28 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
jQuery textarea的长度进行验证
2009/05/06 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python3实现购物车功能
2018/04/18 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
财务总经理岗位职责
2014/02/16 职场文书
中介业务员岗位职责
2014/04/09 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2015年暑假工作总结
2015/07/13 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
golang 在windows中设置环境变量的操作
2021/04/29 Golang
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS