vue中递归组件的使用

2019独角兽企业重金招聘Python工程师标准>>>

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