2.3-插槽的使用

Create by fall on:2022-08-31 Recently revised in:2022-08-31

插槽

父组件

// slotProps 是从子组件传过来的数据
<MyComponent v-slot="slotProps">
  <span>{{ slotProps.text }} {{ slotProps.count }}</span>
</MyComponent>

// 子组件
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

渲染完后

<div>
  <span>{{ slotProps.text }} {{ slotProps.count }}</span>
</div>