在子组件中使用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的参数,在父组件的插槽中接收
参考官方案例