首页 > 其他 > 详细

递归组件的使用

时间:2021-07-09 18:15:29      阅读:33      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

 

1.html代码

<template>
  <div class="detail_list">
    <div
      v-for="(item,index) of listdata"
      :key="index"
      class="tit_list"
    >
      <div class="border-bottom">
        <span class="iconfont icon-piaoju des_icon"></span>
        {{item.title}}
      </div>

      <div class="item_list" v-if="item.children">
        <detail-list :listdata="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

2.js代码

<script>
import DetailList from ‘./DetailList.vue‘
export default {
  name: ‘DetailList‘,
  props: {
    listdata: Array
  },
  components:{
    DetailList
  }
}
</script>

3.数据是从父组件传入进来的listdata

技术分享图片

 

递归组件的使用

原文:https://www.cnblogs.com/pwindy/p/14990728.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!