v-for实现递归组件

最新推荐文章于 2023-07-12 11:14:43 发布

木辰風

最新推荐文章于 2023-07-12 11:14:43 发布

阅读量625

点赞数 1

分类专栏： vue 文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/qq_42277412/article/details/126002012

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件代码

<template v-for="task1 in task0.list">
    <div class="db_item">
        <a class="db_item_tit" href="javascript:;" @click="activeTab(task1.menuId)"><i class="fa fa-folder"></i>{{task1.name}}（{{task1.taskCount}}）</a>
	    <ul>
		    <task-item :task-item="task1"></task-item>
		    <div class="clear"></div>
	    </ul>
    </div>
</template>

需要递归的组件taskItem（template要一个标签包起来，比如：div）

<script type="text/javascript">
	Vue.component('taskItem', {
		template: ''+
				'<div>' +
					'<div v-if="taskItem.tasks">' +
						'<li v-for="task0 in taskItem.tasks"><a href="javascript:;" @click="activeTab(taskItem.menuId, task0.actId)"><i class="fa fa-calendar-check-o"></i>{{task0.actName}}<em>（{{task0.taskCount}}）</em></a></li>' +
					'</div>' +
					'<div v-if="taskItem.list">' +
						'<task-item v-for="task0 in taskItem.list" :task-item="task0"></task-item>' +
					'</div>' +
				'</div>' +
				'',
		data:function() {
			return {
			}
		},
		props: {
			taskItem:[Object],
		},
		methods:{
			activeTab: function (menuId, actId) {
				//...
			},
		}
	});
</script>