1. 递归 简单来讲就是程序自己调用自身。
  2. 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中递归组件的使用的更多相关文章

  1. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  2. 谈谈Vue的递归组件

    2月最后一天,而且还四年一遇,然而本月居然一篇博客没写,有点说不过去.所以,今天就来谈谈Vue的递归组件.我们先来看一个例子: See the Pen 递归组件 by imgss (@imgss) o ...

  3. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  4. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  5. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  6. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. Vue 中的组件

    VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...

  8. Vue 中数据流组件

    好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...

  9. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

随机推荐

  1. VM虚拟机复制文件问题

    需要安装好vmtools,安装好后,启动虚拟机环境: 把需要复制的文件拖进虚拟机环境窗口,鼠标指针会变成复制图标,直接左键即可复制: 不能Ctrl+c-Ctrl+v进去.

  2. Java HashMap源码详解

    Java数据结构-HashMap 目录 Java数据结构-HashMap 1. HashMap 1.1 HashMap介绍 1.1.1 HashMap介绍 1.1.2 HashMap继承图 1.2 H ...

  3. webpack配置示例

    var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('commo ...

  4. Mac系统中安装virtualenv虚拟环境

    总体来说有三个步骤. 1.创建工作目录. python3 -m venv lanyue_env 注意: 2.安装virtualenv. pip3 install --user virtualenv 2 ...

  5. MySQL5.7使用Notifier启动、停止服务时出现的问题

    1.选择右击右下角 MySQL Notifier ,选择 Actions -> Manage Monitored Items 2.选择当前的服务 MySQL57  并进行删除 3.然后点击  a ...

  6. String 对象-->toLowerCase() 方法

    1.定义和用法 将字符串中所有的大写字符转换成小写字符,小写字符不变 返回转换后的结果字符串 语法: string.toLowerCase() 注意:不会改变字符串本身,仅以返回值的形式返回结果 举例 ...

  7. SpringMVC框架详细教程(四)_使用maven导入各个版本的Spring依赖包

    使用maven导入Spring依赖包 上一节讲了如何向动态Web项目添加下载的Spring依赖包,作为补充下面列出了如何使用 maven 导入Spring的依赖包,可以选择需要的导入(推荐)或者全部导 ...

  8. 内存对齐 align

    /* 地址对齐:指的是存放数据的首地址%N==0,而且整个结构体的大小%M(结构体的有效对齐值)==0 1 数据类型的自身对齐值:char:1 short:2 int,flolat,double:4 ...

  9. 怎么搭建python环境?很简单,就几步的事

    现在学习python的人越来越多了,而学习python必备的就是搭建python环境,那么,到底怎么搭建python环境呢? 首先,你需要有安装包,这个去官网下载就可以了,如果不会的话,可以看文章底部 ...

  10. 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter

    先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...