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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
Javascript String.replace的妙用
Sep 08 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
javascript Object与Function使用
Jan 11 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 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中的cookie
2006/11/26 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
php封装一个异常的处理类
2017/06/08 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
php7性能提升的原因详解
2019/10/13 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
关于vue中 $emit的用法详解
2018/04/12 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Python编写电话薄实现增删改查功能
2016/05/07 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python、Matlab求定积分的实现
2019/11/20 Python
python实现画循环圆
2019/11/23 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
zooplus意大利:在线宠物商店
2019/08/07 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
两年的个人工作自我评价
2014/01/10 职场文书
部队万能检讨书
2014/02/20 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
采购员岗位职责范本
2015/04/07 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL