作用域插槽

使用场景：插槽获取子组件数据

<!--child.vue-->
<template>
  <div class="child-box">
    <p>我是子组件</p>
    <slot name="header" text="我是子组件小猪课堂" :count="1"></slot>
  </div>
</template>

<!--App.vue-->
<template>
  <img alt="Vue logo" src="./assets/logo.png"/>
  <child>
    <!-- 可以用解构 -->
    <template #header="{ text, count }">
      <div>{{ text }}---{{ count }}</div>
    </template>
  </child>
</template>

参考：

1. Vue3中插槽(slot)用法汇总 (opens new window)
2. 一文搞懂Vue3中slot插槽的使用！ (opens new window)