vue 如何使用递归组件

有的时候我们会使用二级标题，什么叫做二级标题？
先看看传过来的数据。
类似于这种，数组中还有一个数组，有的人可能会说那就用两个v-for嵌套使用啊，但是这里，我们想要它们是同样的功能，同样的样式，所以使用递归组件是最好的选择。

递归组件：在组件的自身再调用组件的自身。

组件一般要给个名字，方便我们使用递归组件的时候来使用，如果我自身有children，就把children当做list再传给自己，做一个递归的循环。

此时就渲染出来了。

如果我再增加一个children呢？像这样：

此时不用做任何事，只改变了数据结构，去看浏览器渲染的页面：

三级标题就出来了，而我们只修改了数据结构，模板处没有动任何地方。
这就是递归组件的使用，只要children存在，就调用自身。
如果用v-for来写，可能还要写一层循环。

tips 关于name的一些使用

每一个组件内的name值到底是做什么用的呢？

1. 当我们做递归组件会用到
2.在页面上想对某个页面取消缓存，keep-alive exclude="xxname"
3.Vue的开发者调试工具，会显示一个个组件名，取决于这个name

我目前所知大概就是这些用途了，以后发现了新的用途会再更新的。

以上就是vue 如何使用递归组件的详细内容，更多关于vue 使用递归组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue两种组件类型:递归组件和动态组件的用法

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> <div> <p>递归组件</p> <Recursion :count="count + 1" v-if="count < 3"></Recursion> </div> </template&g

  • Vue一个案例引发的递归组件的使用详解

    今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的 <Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项目中使用递归组件. 信息的分类展示列表 这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类,如下如所示: 看到这个很多人会想到这个实现起来很简单啊,来个嵌套循环不就完事了. 对,你说的没错,事实就是这样简单.那么就先来看看这么简单的列表怎么实现的,然后这个方案的劣势在哪里. 首先看看我们的数据格式

  • vue用递归组件写树形控件的实例代码

    最近在vue项目中遇到需要用树形控件的部分,比如导航目录是不确定的,所以必须要用树形结构,不管导航目录有几级,都可以自动显示出来,我一开始觉得element-ui有树形控件,不需要自己写,调用就可以了,后来才发现,调用完事之后,样式不可控,而且要加东西特别困难,无法满足项目需求,于是,一首<凉凉>送给自己,后来去翻vue官网,发现居然有递归组件,一开始我写了两个组件,互相调用,可以写出来,后来返现,如果项目要用到5棵树,我要写10个组件,而且样式控制起来超级恶心,于是我就各种查资料,原生的也试

  • vue递归组件实战之简单树形控件实例代码

    1.递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"><!--节点内容--> <div class="expand-

  • Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不能容易太多.下面就手把手带您一步步拨开这个案例的层层迷雾. 实现步骤如下: 1. api构建部门和员工信息接口,vuex全局存放部门list和员工list数据信息. api: export default { getEmployeeList () { return { returncode: 0,

  • 用 Vue.js 递归组件实现可折叠的树形菜单(demo)

    用 Vue.js 递归组件实现可折叠的树形菜单(demo)

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component>` }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形

  • Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

    Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

    写在前面 首先,本篇文章所开发的组件并非一个已经开源的上线组件,所以如果你急于需要一个插件来只做你的项目,那么并不能带给你及时的帮助.这个组件的开发预计写两篇文章,一遍写组件,一篇写组件逻辑.这篇文章也是我自己开发的从无到有的过程,所以它可以为你提供一些Tree组件开发的思路,代码写到一定程度,不能完全依赖插件了,有时间可以看看插件源码或者动手去开发,这样真的能加深对技术的掌握程度. 开发过程 1.数据仓库-Vuex 2.组件的循环创建-递归组件 需求决定了我的技术选型,项目需求是一个中国各级政

  • Vue.js 递归组件实现树形菜单（实例分享）

    Vue.js 递归组件实现树形菜单（实例分享）

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • Vue.js递归组件实现组织架构树和选人功能案例分析

    大家好!先上图看看本次案例的整体效果. **浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不能容易太多.下面就手把手带您一步步拨开这个案例的层层迷雾.** 实现步骤如下: 1. api构建部门和员工信息接口,vuex全局存放部门list和员工list数据信息. api: export default { getEmployeeList () { return { returncode:

  • vue 如何使用递归组件

    有的时候我们会使用二级标题,什么叫做二级标题? 先看看传过来的数据. 类似于这种,数组中还有一个数组,有的人可能会说那就用两个v-for嵌套使用啊,但是这里,我们想要它们是同样的功能,同样的样式,所以使用递归组件是最好的选择. 递归组件:在组件的自身再调用组件的自身. 组件一般要给个名字,方便我们使用递归组件的时候来使用,如果我自身有children,就把children当做list再传给自己,做一个递归的循环. 此时就渲染出来了. 如果我再增加一个children呢?像这样: 此时不用做任何事

  • 基于Vue技术实现递归组件的方法

    基于Vue技术实现递归组件的方法

    描述 本文介绍的是基于Vue技术实现递归组件的方法.用Vue实现一级列表.二级列表的展示很简单,但是想要实现无限级,光是套上一个又一个的v-for是行不通的,这个时候就需要用到递归的方法,所谓递归,就是不断调用自身,递归组件就是不断调用自身组件来实现无限级列表展示.如下图: 代码实现 1.tree组件 在目录下创建一个 tree.vue 的组件. <!-- tree 树形组件 --> <template> <div class="container">

  • vue.js学习之递归组件

    vue.js学习之递归组件

    递归组件 组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以. 在官网这句话就是关键定义组件是一定要有name属性.按照这个思路我们开动吧. 实现最终效果图: 模拟数据格式如下: var data = [{ "id": "1", "data": { "menuName": "项目管理", "menuCode": "", }, "child

  • Vue.js递归组件构建树形菜单

    Vue.js递归组件构建树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component> }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜

随机推荐