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

发布时间:2022-10-22 13:35:17 作者:iii
来源:亿速云 阅读:226

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

推荐阅读:
  1. vue递归组件之如何实现简单树形控件
  2. Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:vue父组件向子组件传值的方法是什么

下一篇:如何用u盘重装系统win8

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》