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 循环读取JSON数据的代码
Jul 17 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
解读ES6中class关键字
Nov 20 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
php生成微信红包数组的方法
2019/09/05 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
js加解密 脚本解密
2008/02/22 Javascript
javascript  Error 对象 错误处理
2008/05/18 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
Django框架实现逆向解析url的方法
2018/07/04 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python按比例随机切分数据的实现
2019/07/11 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python turtle画图库&&画姓名实例
2020/01/19 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Python super()函数使用及多重继承
2020/05/06 Python
python绘制雷达图实例讲解
2021/01/03 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
公开致歉信
2019/06/24 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python