业务场景中有时需要对第三方组件进行二次封装, 比如弹窗,表格等组件, 有时项目内会根据业务进行二次封装成业务组件, 新的业务组件会需要把自己的slots透传给原本的组件, 也可以叫传递插槽

vue 文档中的传递插槽

https://staging-cn.vuejs.org/guide/extras/render-function.html#passing-slots

// 单个默认插槽
h(MyComponent, () => 'hello')

// 具名插槽
// 注意 `null` 是必需的
// 以避免 slot 对象被当成 prop 处理
h(MyComponent, null, {
    default: () => 'default slot',
    foo: () => h('div', 'foo'),
    bar: () => [h('span', 'one'), h('span', 'two')]
})

因为这部分文档是渲染函数的介绍, 所以没有 template 的slots透传示例, 那么用SFC写法时, 该如何透传 slots 呢

我们可以使用动态插槽名来解决, 同时把作用域插槽 的传值也加上

最终代码

<template>
	<my-comp>
		<template
    		v-for="(item, key, index) in $slots"
	    	:key="index"
			v-slot:[key]="slotScope"
		>
    		<slot :name="key" v-bind="slotScope"></slot>
		</template>
	</my-comp>
</template>

这里的my-comp 是被二次封装的组件, 上面的代码可以把当前的组件接受到的slot原封不动传递给 my-comp