vue 如何使用递归组件
更新时间：2020年10月23日 10:09:25 作者：八宝君
这篇文章主要介绍了vue 如何使用递归组件，帮助大家更好的理解和使用vue，完成开发需求，感兴趣的朋友可以了解下
有的时候我们会使用二级标题，什么叫做二级标题？
先看看传过来的数据。
类似于这种，数组中还有一个数组，有的人可能会说那就用两个v-for嵌套使用啊，但是这里，我们想要它们是同样的功能，同样的样式，所以使用递归组件是最好的选择。
递归组件：在组件的自身再调用组件的自身。
组件一般要给个名字，方便我们使用递归组件的时候来使用，如果我自身有children，就把children当做list再传给自己，做一个递归的循环。
此时就渲染出来了。
如果我再增加一个children呢？像这样：
此时不用做任何事，只改变了数据结构，去看浏览器渲染的页面：
三级标题就出来了，而我们只修改了数据结构，模板处没有动任何地方。
这就是递归组件的使用，只要children存在，就调用自身。
如果用v-for来写，可能还要写一层循环。
tips 关于name的一些使用
每一个组件内的name值到底是做什么用的呢？
1. 当我们做递归组件会用到 2.在页面上想对某个页面取消缓存，keep-alive exclude="xxname" 3.Vue的开发者调试工具，会显示一个个组件名，取决于这个name
我目前所知大概就是这些用途了，以后发现了新的用途会再更新的。
以上就是vue 如何使用递归组件的详细内容，更多关于vue 使用递归组件的资料请关注脚本之家其它相关文章！
相关文章
Vue2 Vue-cli中使用Typescript的配置详解
Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。下面这篇文章主要给大家介绍了关于Vue2 Vue-cli中使用Typescript的配置的相关资料，需要的朋友可以参考下。2017-07-07
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的组件库,在使用 Element-Plus 进行开发时,我们可能会遇到需要自定义组件样式的情况,本文将介绍如何使用 CSS 来去除 Element-Plus 下拉框的边框,需要的朋友可以参考下2024-03-03
vue中ref和$refs获取元素dom、获取子组件数据与方法调用示例
在Vue3中要获取子组件的DOM节点,你可以使用ref来引用子组件,然后通过$refs来访问子组件的DOM,下面这篇文章主要给大家介绍了关于vue中ref和$refs获取元素dom、获取子组件数据与方法调用的相关资料,需要的朋友可以参考下2024-07-07
在Vue中，computed属性是一种计算属性，它的值是根据其他数据的值动态计算出来的，下面小编主要来和大家聊聊Vue 3的组合式API中如何使用computed属性，感兴趣的小伙伴快跟随小编一起了解一下吧2023-06-06
Vue 如何使用props、emit实现自定义双向绑定的实现
这篇文章主要介绍了Vue 如何使用props、emit实现自定义双向绑定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了vue使用nprogress实现进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这篇文章给大家介绍了vue组件的使用，需要的朋友参考下吧2018-01-01
这篇文章主要介绍了vue.js自定义组件directives的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
在本文中，将向你展示5个特性，你可以通过 Vuex 插件轻松地添加到下一个项目中。一起来学习下。2017-11-11
vue解决Not allowed to load local resource问题的全过程
这篇文章主要给大家介绍了关于vue解决Not allowed to load local resource问题的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-10-10
最新评论