vue组件使用name属性来生成递归组件
先来个简单的数据
1 lists = [{
2 id: 1,
3 title: '第一层',
4 children: [{
5 id: 3,
6 title: '第二层',
7 children: [{
8 id: 4,
9 title: 第三层
10 }]
11 }]
12 },{
13 id: 2,
14 title: '第一层'
15 }]
上面的数据是个很简单的数据,一个数组,嵌套了3层,即id为1为祖,id为3为父,id为4位孙。
创建一个简单的单组件,list.vue,name属性为list
1 <template>
2 <div>
3 <div
4 class="item"
5 v-for="(item, index) in lists"
6 :key="index"
7 >
8 <div class="item-title">
9 {{item.title}}
10 </div>
11 <div v-if="item.children" class="item-children">
12 <!-- 调用自己,将数据传递进去,一定要加判断数据是否存在,以防出bUG -->
13 <!-- 使用组件nama属性list来调用 -->
14 <list :list="item.children"></list>
15 </div>
16 </div>
17 </div>
18 </template>
19
20 <script>
21 export default {
22 // name主要是为了使用递归组件
23 name: 'DetailList',
24 props: {
25 // 数据上方
26 lists: Array
27 }
28 }
渲染结果为:
第一层
第二层
第三层
第一层
好像有点难分,给item-children加个padding-left属性,
如padding-left: .2rem
渲染结果大概是:
第一层
第二层
第三层
第一层
用来做树型数据的列表往往很好用,节省了代码。
vue组件使用name属性来生成递归组件的更多相关文章
- vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)
第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
- Vue两种组件类型介绍:递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...
- 组件的三大属性state,props,refs与事件处理
组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...
- Vue--vue中的组件、组件绑定事件和数据、私有组件、子组件,父子组件参数互传
一.公有组件以及组件的使用和特点 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- vue的递归组件以及三级菜单的制作
js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性 父组件:slotDemo.vue: <template> <div& ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
随机推荐
- 预科班D12
2020.09.22星期二 预科班D12 学习内容: 一.修改文件的两种方式 1.方案一 思路:(1)先以r形式打开源文件 (2)将源文件内容一次性读入内存中,在内存中修改完毕 (3)以w ...
- Aop的学习与使用
什么是aop AOP(Aspect Oriented Programming)意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一 ...
- 【微服务】 数据库案例理解Spring Security OAuth
突然被问,你是做技术的怎么不走技术路线呢?是啊~仔细想想至今做了这么多年的技术,研发过的系统&产品五花八门,涉及到的领域各行各业:政府.军队.公安.国安.石油&石化.金融.教育.华为等 ...
- TP6 数据库管理工具,生成前后台CRUD页面
Tp6 数据库管理工具,数据库内容的搬运工 支持MySQL数据库,可视化配置直接生成前后台CRUD页面减少重复劳动,可以直接作为后台页面使用.前端页面技术基于 iszsw/surface 支持多表关联 ...
- 基础篇:java基本数据类型
1:java几种基本数据类型大小 关键字 类型 位数 (8位一字节) 取值范围(表示范围) byte 整型 8 -2^7 ~ 2^7-1 short 整型 16 -2^15 ~ 2^15-1 int ...
- 概率派VS贝叶斯派
机器学习中的MLE和MAP两大学派的争论: 频率学派 - Frequentist - Maximum Likelihood Estimation (MLE,最大似然估计): 频率学派认为世界是确定的, ...
- linux内核 idr机制
idr机制解决了什么问题?为什么需要idr机制(或者说,idr机制这种解决方案,相对已有的其他方案,有什么优势所在) ? idr在linux内核中指的就是整数ID管理机制,从本质上来说,这就是一种将整 ...
- LCD显示器缺陷自动化检测方案
很牛的测试 参考: 1.https://www.radiantvisionsystems.com/ 2.https://www.radiantvisionsystems.com/node/275 LC ...
- 【题解】[USACO07NOV]Sunscreen G
\(Link\) \(\text{Solution:}\) 把奶牛的忍耐度转化为线段,则题目转化为选择一些点使得覆盖的线段尽可能多.一个点只能覆盖一条线段. 考虑将点按照位置排序,线段按照右端点排序. ...
- Hive理论基础
数仓特征:面向主题,集成,非易失的,时变.数据仓库是在数据库已经大量存在的情况下,为了进一步挖掘数据资源.为了决策需要而产生的,不是所谓的"大型数据库". 数据库与数据仓库的区 ...