Vue slot插槽的使用，定义动态插槽

assassinator_567

于 2021-08-09 11:04:30 发布

阅读量2.5k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/assassinator_567/article/details/119532774

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了Vue slot插槽的使用，重点在于定义动态插槽。需求是封装vxetable并对外提供自定义插槽，既可以定义如edit的固定名字插槽，也能定义和列名相同的动态插槽，还提及了代码及参考来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue slot插槽的使用，定义动态插槽

需求

封装vxetable,并对外提供自定义插槽，可以定义像edit一样固定名字的插槽，也可以定义和列名相同的动态插槽

代码

// 子级封装
<template #edit="{ row }">
    <slot name="edit" :row="row"></slot>
</template>
<template v-for="(item,index) in columns" #[item.dataIndex]="{ row }">
    <slot :name="item.dataIndex" :col="row"></slot>
</template>
// 父级调用
<template #departmentName="prop">
     <a @click="view(prop.col.name)">{{prop.col.name}}</a>
</template>
<template #edit="prop">
     <a @click="edit(prop.row)">编辑</a>
</template>

参考自

动态插槽