插槽

1.具名插槽：

子组件：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

2.插槽作用域：在父组件中使用“类容”替换子组件中的插槽时，“类容”部分使用子组件的数据（在父组件使用子组件数据）

子组件：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

父组件：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}//其中user.firstName是子组件的数据
  </template>
</current-user>

已废弃写法：

<slot-example>
  <template slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
</slot-example>