vue自定义循环组件

最新推荐文章于 2024-04-11 09:55:13 发布

刘炳岗

最新推荐文章于 2024-04-11 09:55:13 发布

阅读量501

点赞数 8

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_42272558/article/details/136447299

版权

<template>
	<view class="task-container">
		<treeTask @getTaskChildList="getTaskChildList" v-for="(item, index) in taskList" :key="index" :item="item"></treeTask>
	</view>
</template>

<script>
	import treeTask from '@/components/task/task.vue'
	export default {
		data() {
			return {
				masterId: '',
                taskList：[]
			}
		},
		components: {
			treeTask
		},
		methods: {
			getTaskChildList(masterId) {
				
			},
		}
	}
</script>

自定义树形控件的核心就是“组件自己调用自己” 这里将树形控件封装成一个子组件


<template>
  <div>
    <div class="tree-custom">
      <<treeTask v-on="$listeners" v-for="(child, index) in item.children" :key="index" :item="child"></treeTask>
    </div>
  </div>
</template>
<script>
export default {
  name: 'treeTask ',
  data () {
    return {
      
    }
  },
  props: {
    item: {
		type: Object,
		required: true
	}
  },
  methods: {
    handleTask() {
	    this.$listeners.getTaskChildList(this.masterId)
    }
  }
}
</script>