Vue组件插槽中数据的传递问题

        组件内部能够使用插槽标记对<slot></slot>,添加插槽则可以在该组件标记对中放置数据。同样在插槽标记对内部同样可以使用自定义属性携带数据。插槽的使用可以让开发者比比较随心的为组件添加数据,可以提高组件的通用性。

        组件中用好插槽难点在于其数据的传递过程,以下为插槽使用的例子代码:

Vue.component("myChart",{
	template:`
		<table>
			<thead>
				<tr>
					<template v-for="(item,index) in theadDate">
						<th><slot name="item" :item=item :index=index></slot></th>
					</template>
				</tr>
			</thead>
			<tbody>
				<template v-for="(item,index) in tbodyDate">
					<tr>
						<slot name="body" :item=item :index=index></slot>
					</tr>
				</template>
			</tbody>
		</table>
	`,
	props:["theadDate","tbodyDate"]
}

        组件代码的目的是建立一个表格,该表格有一行表头,多行表体,且每行存在多个单元格。在该代码中两处使用了slot标记对,标记对中均传入了数据item和index,且使用item与index自定义属性携带。

        在组件使用中需要在使用插槽(添加了v-slot)中指定目标插槽的name取值来进行对接,同时自定义一个变量接收插槽中携带的数据。注意,插槽中可携带多个数据,均由这一个自定义变量接收,所以该变量是对象数据类型,并用点语法进行调配使用。调用代码如下:

<my-chart :thead-date="theadDate" :tbody-date="tbodyDate">
		<template v-slot:item="sc">
			<template v-if="sc.index===0">
				<input type="checkbox">
			</template>
			<template v-else>
				{{sc.item}}
			</template>
		</template>
    	<template v-slot:body="sc">
			<td><input type="checkbox"></td>
			<template v-for="(value,key,index) in sc.item">
				<td>{{value}}</td>
			</template>
			<td><button>新增</button><button>删除</button></td>
		</template>
</my-chart>

        在该部分代码里数据传递流程大致如下:

        使用插槽进行数据传递,可以在代码中定义自己想要的表单效果,而不是仅仅只渲染规定好的数据和结构,增加了组件的通用性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值