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 相关文章推荐
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
JavaScript Array对象详解
Mar 01 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue实现百度搜索功能
Dec 28 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代码
2011/11/27 PHP
php两种无限分类方法实例
2015/04/21 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
javascript数组去掉重复
2011/05/12 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
Python中的lstrip()方法使用简介
2015/05/19 Python
python与C互相调用的方法详解
2017/07/14 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Python小进度条显示代码
2019/03/05 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
物理系毕业生自荐信
2013/11/01 职场文书
司马光教学反思
2014/02/01 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
说明书格式及范文
2014/05/07 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL