vue递归组件是什么及怎么实现

发布时间：2022-10-22 13:35:17 阅读：251 作者：iii 栏目：开发技术

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{
padding: 2px;
padding-left: 20px;
margin-bottom: 2px;
}
</style>

“vue递归组件是什么及怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

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

向AI问一下细节

vue递归组件是什么及怎么实现

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签