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 判断字符串是否为数字的简单方法
Jul 25 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
Vue-component全局注册实例
Sep 06 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
js+css3实现简单时钟特效
Sep 13 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
第十三节 对象串行化 [13]
2006/10/09 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
浅析php原型模式
2014/11/25 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
Add a Formatted Table to a Word Document
2007/06/15 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
JS中Map和ForEach的区别
2018/02/05 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
Python生成器以及应用实例解析
2018/02/08 Python
python每天定时运行某程序代码
2019/08/16 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
英语系本科生求职信范文
2013/12/18 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
大学专科自荐信
2014/06/17 职场文书
社区志愿者活动方案
2014/08/18 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
无保留意见审计报告
2015/06/05 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书