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 圆角div的实现代码
Oct 15 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
js 执行上下文和作用域的相关总结
Feb 08 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Angular工具方法学习
2016/12/26 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
详解node.js 事件循环
2020/07/22 Javascript
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python requests模块session代码实例
2020/04/14 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
会计顶岗实习心得
2014/01/25 职场文书
企业军训感想
2014/02/07 职场文书
数学教育专业求职信
2014/07/22 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书