温馨提示×

vue中什么是递归组件

vue
清风
489
2021-03-15 12:54:10
栏目: 编程语言
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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{

padding2px;

padding-left20px;

margin-bottom2px;

}

</style>

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:VUE组件递归调用的方法是什么

0