最近在封装组件时,发现定义插槽时,我还想把一些数据传到父组件中,这样我在使用插槽的时候,就可以直接使用这些数据了,这样非常干脆,不用来回倒腾,查看了一些资料发现,原来具名插槽可以传参; 话不多说,使用如下(我在表格中的使用案例):
//子组件中定义具名插槽
<el-table-column label="操作" width="200">
<template #default="scope">
<slot name="tableOperateBtn" :slotData="scope.row" >
</slot>
</template>
</el-table-column>
//父组件中使用插槽
<template v-slot:tableOperateBtn="slotProps">
<el-button icon="h-icon-edit" title="编辑" @click="editDataSource(slotProps.slotData)" />
<el-button icon="h-icon-delete" @click="deleteDataSource(slotProps.slotData)" title="删除" />
</template>
从上面代码可见,使用起来非常简洁方便~