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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
react+antd 递归实现树状目录操作
Nov 02 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
德生H-501的评价与改造
2021/03/02 无线电
php实现推荐功能的简单实例
2019/09/29 PHP
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
介绍Python中的__future__模块
2015/04/27 Python
python开发简易版在线音乐播放器
2017/03/03 Python
python使用opencv进行人脸识别
2017/04/07 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Django的models中on_delete参数详解
2019/07/16 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
税务干部鉴定材料
2014/02/11 职场文书
销售提升方案
2014/06/07 职场文书
应届大学生求职信
2014/07/20 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
Python matplotlib多个子图绘制整合
2022/04/13 Python