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 相关文章推荐
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
vue增删改查的简单操作
Jul 15 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 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生成图片缩略图类示例
2017/01/12 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python 连连看连接算法
2008/11/22 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python sep参数使用方法详解
2020/02/12 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
中间件分为哪几类
2016/09/18 面试题
掌上明珠Java程序员面试总结
2016/02/23 面试题
精彩的推荐信范文
2013/11/26 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
捐助倡议书范文
2014/04/15 职场文书
三方协议书范本
2014/04/22 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis