vue中什么是递归组件 vue组件划分原则

博主:xiaoweixiaowei 2022-12-28 条评论

递归所指的是程序自己调用自身,而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>

The End

发布于:2022-12-28,除非注明,否则均为 主机评测原创文章,转载请注明出处。