vue+vant 封装menu组件----Tree型结构(递归)

父父组件:

    <template>
		<van-popup
	      v-model="show"
	      closeable
	      close-icon-position="top-left"
	      position="right"
	      :style="{ width: '100%',height: '100%' }">
	        <ReportListMenu :MenuData="MenuData"></ReportListMenu>
	    </van-popup>
	</template>
	<script>
		// 递归组件无法直接通过$emit()传值给父组件
		import Bus from '@/components/XXX/bus'
		import ReportListMenu from '@/components/XXX/ReportListMenu'
		export default {
			components: {
			    ReportListMenu
			 },
			data (){
				return {
					show: false,
					MenuData: []  // 菜单栏的数据(树形结构的数据)
				}
			},
			created() {
			    Bus.$on('clickmenuhandle', categoryId => {  
			        // 拿到的子组件的值(这里是categoryId)可以to do something
			    }); 
			  },
		}
	</script>

父组件:

<template>
  <div class="report_menu">
    <div class="menu_list" v-if="MenuData">
      <ReportMenuChildren
        v-for="(item, index) in MenuData"
        :key="index" :col="item"></ReportMenuChildren>
    </div>
  </div>
</template>
<script>
import ReportMenuChildren from '@/components/xxxxx/ReportMenuChildren'
export default {
  components: {
    ReportMenuChildren
  },
  props: ['MenuData']
}
</script>

子组件:

<template>
  <van-cell-group class="menuList">
    <van-cell
      :title="col.name"
      @click="menuListHandle(col)">
      <van-icon name="arrow" v-if="col.children.length > 0" />
    </van-cell>
    <div :class="show?'':'childNode'" v-if="col.children">
    	// report-menu 根据下面的name的值
      <report-menu v-for="(item, index) in col.children"
      :key="index"
      :col="item"></report-menu>
    </div>
  </van-cell-group>  
</template>
<script>
import { Toast } from 'vant'
import Bus from '@/components/xxxxx/bus'
export default {
  name: 'ReportMenu',
  props: {
    col: {
      type: Object
    }
  },
  data () {
    return {
      show: false
    } 
  },
  methods: {
    menuListHandle (data) {
      if (data.type === 1) {
        if (data.children.length === 0) {
          Bus.$emit('clickmenuhandle', data.id);  
        } else {
          this.show = !this.show
        } 
      } else {
        Toast.fail('此分类不可选')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .childNode{
      display: none;
    }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值