具名插槽从子组件想父组件传参

33 阅读1分钟

最近在封装组件时,发现定义插槽时,我还想把一些数据传到父组件中,这样我在使用插槽的时候,就可以直接使用这些数据了,这样非常干脆,不用来回倒腾,查看了一些资料发现,原来具名插槽可以传参; 话不多说,使用如下(我在表格中的使用案例):

//子组件中定义具名插槽
<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>

从上面代码可见,使用起来非常简洁方便~