vue中递归组件的使用
- 递归 简单来讲就是程序自己调用自身。
- vue中的递归组件就是,组件自身调用自身。
父组件
<template>
<div id="app">
<category :datalist="datalist"></category>
</div>
</template>
<script>
import category from './category.vue'
export default {
name: 'app',
data () {
return {
datalist:[
{
title:'手机',
level:1,
children:[
{
title:'三星',
level:2,
children:[
{
title:'三星1',
level:3
}
]
},
{
title:'华为',
level:2
},
{
title:'苹果',
level:2
}
]
}
]
}
},
components:{
category
},
created() {
}
}
</script>
<style>
</style>
子组件(递归调用的组件)
<template>
<div id="phone">
<div v-for="(item ,index) in datalist" :key="index">
{{item.title}}
<div v-if="item.children" class="item-chilren">
<phone :datalist="item.children"></phone>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'phone',
data () {
return {
}
},
props:{
datalist:Array
},
created() {
}
}
</script>
<style>
.item-chilren{
}
.item-chilren div{
padding: 2px;
padding-left: 20px;
margin-bottom: 2px;
}
</style>
Vue组件名字的作用
什么要给名字?这个名字是干什么用呢?这个名字很大的一个用处,就是为了我们使用递归组件的时候来使用 。
如果一个组件要使用自己的时候 ,我就可以通过自己的名字来使用自己。
<phone :datalist="item.children"></phone>
转载于:https://my.oschina.net/2016jyh/blog/3009561
vue中递归组件的使用的更多相关文章
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 谈谈Vue的递归组件
2月最后一天,而且还四年一遇,然而本月居然一篇博客没写,有点说不过去.所以,今天就来谈谈Vue的递归组件.我们先来看一个例子: See the Pen 递归组件 by imgss (@imgss) o ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 中的组件
VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
随机推荐
- es6声明一个类
js语言的传统方式是通过定义构造函数,生成心得对象.是一种基于原型的面向对象系统.在es6中增加了class类的概念,可以使用class关键字来声明一个类.之后用这个类来实例化对象. 构造函数示例 c ...
- Http协议中Cookie使用详细介绍
Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的.硬盘Cookie ...
- MySQL从库实用技能(一)--巧用slave_exec_mode参数
想必从库异常中断的情况不在少数,其中报错信息中1032及1062的错误占了不少的比重 错误1032指的是从库中找不到对应行的记录 错误1062指的是主键冲突 遇到此报错时,大多DBA会使用如下方法进行 ...
- PTA数据结构与算法题目集(中文) 7-41PAT排名汇总 (25 分)
PTA数据结构与算法题目集(中文) 7-41PAT排名汇总 (25 分) 7-41 PAT排名汇总 (25 分) 计算机程序设计能力考试(Programming Ability Test,简称P ...
- Linux 磁盘管理篇,目录管理(一)
目录: 当我们在linux的ext2档案建立一个目录时,ext2会分配一个inode与至少一块Block给该目录,其中inode记录该目录在相关属性,并指向分配到在那块Block,而block ...
- Go gRPC进阶-超时设置(六)
前言 gRPC默认的请求的超时时间是很长的,当你没有设置请求超时时间时,所有在运行的请求都占用大量资源且可能运行很长的时间,导致服务资源损耗过高,使得后来的请求响应过慢,甚至会引起整个进程崩溃. 为了 ...
- 五个简单的shell脚本
1.编写shell脚本 ex1.sh,提示用户输入用户名,并判断此用户名是否存在. (提示:利用read.grep和/etc/passwd) #!/bin/bash echo "请输入用户名 ...
- vue项目中使用bpmn-流程图预览篇
前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...
- [PHP][mysql] 需要知道的那些事
就是想总结一下自己不会的! sql: 1.在SQL语句中出现AS,是起别名的意思! 例子:select a.* from table_1 as a就是给table_1起个别名叫a,因此前面就可以使用a ...
- Unity 游戏框架搭建 2019 (三十二、三十三) 类的命名 & 代码文件命名
昨天我们完成了第八个示例的第二个 MenuItem 菜单顺序的调整. 我们今天再往下接着调整. 我们来看下接下来的 MenuItem 代码如下: [MenuItem("QFramework/ ...