vue3 slot 插槽 穿透传递

适用于二次封装组件

页面

<template>
	<myComponents>
		<template #error="slotProps">
        	你 slot 的占位内容
      	</template>
	</myComponents>
</template>

myComponents 组件

el-image为被二次封装的组件，可根据实际更换为 vant iview uview 等组件库组件，或者为其他组件

<template>
	<el-image>
		<!-- 循环注册 父级传递下来的slot -->
		<template v-for="(value, key) in $slots" #[key]="slotProps" :key="key">
	      <slot :name="key" v-bind="slotProps"></slot>
	    </template>
	</el-image>
</template>

优点

1. 根据父传递的slot 进行注册，避免slot传递错误
2. 节省手动操作时间，空间