vue3插槽作用域插槽

在子组件中使用slot 用:传值给父组件父组件使用插槽的时候用slotProps接收子组件中插槽传递过来的值 当然也可以直接使用对象解构

<!-- <MyComponent> template -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

注意v-slot="slotProps"槽函数签名的匹配方式。就像函数参数一样，我们可以使用解构 in v-slot：

<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

官方的花式使用案例可以使理解更深入哦
例如: 如果希望灵活的处理每个子组件的外观，并且将每个子组件的样式留给使用它的父组件
可以使用v-bind传递每一个item的参数，在父组件的插槽中接收
参考官方案例

添加链接描述