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实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
详解Vue中使用Axios拦截器
Apr 22 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中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
javascrip关于继承的小例子
2013/05/10 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python实现顺序表的简单代码
2018/09/28 Python
Python3爬虫学习入门教程
2018/12/11 Python
python爬取指定微信公众号文章
2018/12/20 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Django框架封装外部函数示例
2019/05/28 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python递归函数特点及原理解析
2020/03/04 Python
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
先进事迹报告会感言
2014/01/24 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
汉字听写大会观后感
2015/06/12 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS