slot 插槽

编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容

当不提供任何插槽内容时：后备内容“Submit”将会被渲染：

<button type="submit">
  <slot>Submit</slot>
</button>

具名插槽

 <header>
    <slot name="header"></slot>
  </header>
  template 加上v-slot:header渲染到对应插槽

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

  <template #header>
    <h1>Here might be a page title</h1>
  </template>

作用域插槽

让插槽内容能够访问子组件中才有的数据

var currentUser = {
  tempalte:`
  <span>
    <slot v-bind:userInfo="user">
      {{ user.lastName }}
    </slot>
  </span>
`
data() {
  return{
    user:{
      lastName: '曹'
    }
  }
}
}

<current-user>
  <!-- 正常写法 -->
  <template v-slot:default="slotProps">
    {{ slotProps.userInfo.firstName }}
  </template>
  <!-- 正常写法的缩写 -->
  <template  #default="slotProps">
    <h1>Here might be a page title</h1>
  </template>
</current-user>

<!-- 模板缩写 -->
<current-user v-slot="slotProps">
  {{ slotProps.userInfo.firstName }}
</current-user>

<!-- 结构 -->

<current-user v-slot="{ userInfo }">
  {{ userInfo.firstName }}
</current-user>

<!-- 缩写加解构 -->
<current-user #default="{ userInfo }">
  {{ userInfo.firstName }}
</current-user>

<!-- 解构 并重命名 -->
<current-user v-slot="{ userInfo: person }">
  {{ person.firstName }}
</current-user>

<!--  -->
<current-user #default="{ userInfo: person }">
  {{ person.firstName }}
</current-user>

:::tips 自 2.6.0 起有所更新。已废弃的使用 slot-scope :::

动态插槽名

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>