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实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
随机推荐
- VM虚拟机复制文件问题
需要安装好vmtools,安装好后,启动虚拟机环境: 把需要复制的文件拖进虚拟机环境窗口,鼠标指针会变成复制图标,直接左键即可复制: 不能Ctrl+c-Ctrl+v进去.
- Java HashMap源码详解
Java数据结构-HashMap 目录 Java数据结构-HashMap 1. HashMap 1.1 HashMap介绍 1.1.1 HashMap介绍 1.1.2 HashMap继承图 1.2 H ...
- webpack配置示例
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('commo ...
- Mac系统中安装virtualenv虚拟环境
总体来说有三个步骤. 1.创建工作目录. python3 -m venv lanyue_env 注意: 2.安装virtualenv. pip3 install --user virtualenv 2 ...
- MySQL5.7使用Notifier启动、停止服务时出现的问题
1.选择右击右下角 MySQL Notifier ,选择 Actions -> Manage Monitored Items 2.选择当前的服务 MySQL57 并进行删除 3.然后点击 a ...
- String 对象-->toLowerCase() 方法
1.定义和用法 将字符串中所有的大写字符转换成小写字符,小写字符不变 返回转换后的结果字符串 语法: string.toLowerCase() 注意:不会改变字符串本身,仅以返回值的形式返回结果 举例 ...
- SpringMVC框架详细教程(四)_使用maven导入各个版本的Spring依赖包
使用maven导入Spring依赖包 上一节讲了如何向动态Web项目添加下载的Spring依赖包,作为补充下面列出了如何使用 maven 导入Spring的依赖包,可以选择需要的导入(推荐)或者全部导 ...
- 内存对齐 align
/* 地址对齐:指的是存放数据的首地址%N==0,而且整个结构体的大小%M(结构体的有效对齐值)==0 1 数据类型的自身对齐值:char:1 short:2 int,flolat,double:4 ...
- 怎么搭建python环境?很简单,就几步的事
现在学习python的人越来越多了,而学习python必备的就是搭建python环境,那么,到底怎么搭建python环境呢? 首先,你需要有安装包,这个去官网下载就可以了,如果不会的话,可以看文章底部 ...
- 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter
先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...