背景

最近在二次封装一些组件库的组件，比如 Input、InputNumber、Select 这些组件，并且是多个组件凑在一起的，比如下面这个组件，是需要将 Input、InputNumber 封装在一起的

如果需要传 props 进去的话，我可以定义两个参数：

• inputProps：接收 Input 的参数
• numberProps：接收 InputNumber 的参数

这样就能分别给这两个组件传参数了，但这不是今天文章的重点

怎么传插槽？

上面是给这两个组件传 props，那如果要给这两个组件传插槽怎么做呢？我们首先来要思考一个问题，这两个组件具备一些重名的插槽名称，就比如 prefix 这个插槽

那我们要怎么去做，才能更好地给这两个组件传插槽呢？先来讨论外部怎么传，想要保证这两个组件的插槽传递不发生冲突，咱们可以使用插槽别名，这也是很多组件库现在采用的方案，代码如下

那么组件内部应该怎么去接收这些插槽呢？这就可以使用插槽转发的方案，我们先看看 Comp 内部遍历 inputSlots 是什么

可以看到当 v-for 遍历一个对象的时候，键值对是倒过来的，跟数组不一样

我们可以利用这个特性，做插槽转发

达到了我们想要的效果~