vue中什么是递归组件 vue中什么是递归组件举个例子说明下

文章摘要：vue中什么是递归组件 vue中什么是递归组件举个例子说明下

递归所指的是程序自己调用自身，而vue中的递归组件就是组件自身调用自身。 实现方法如下： 准备一个父组件存放递 […]

递归所指的是程序自己调用自身，而vue中的递归组件就是组件自身调用自身。

实现方法如下：

准备一个父组件存放递归数据，再创建一个子组件作为递归调用的组件，从而实现递归。

1.父组件。

<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>

2.子组件。

<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>