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 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
js中的this关键字详解
Sep 25 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
深入了解JavaScript 私有化
May 30 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
Node.js API详解之 net模块实例分析
May 18 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
微信小程序实现录音Record功能
May 09 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数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JScript的条件编译
2007/05/29 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python中操作MySQL入门实例
2015/02/08 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python让函数不返回结果的方法
2020/06/22 Python
python如何爬取网页中的文字
2020/07/28 Python
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
给儿子的表扬信
2014/01/15 职场文书
音乐教学反思
2014/02/02 职场文书
无毒社区工作方案
2014/05/23 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
工地安全质量标语
2014/06/07 职场文书
高中学生自我评价范文
2014/09/23 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
python3 hdf5文件 遍历代码
2021/05/19 Python
Python os和os.path模块详情
2022/04/02 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技