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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
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手册及PHP编程标准
2006/12/17 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
100行python代码实现跳一跳辅助程序
2018/01/15 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Atom的python插件和常用插件说明
2018/07/08 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
python selenium 获取接口数据的实现
2020/12/07 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
自主招生自荐信格式
2013/12/03 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
网聊搭讪开场白
2015/05/28 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS