Vue -- 插槽

插槽

• 编译作用域
  父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
  插槽可以访问该组件中的变量，而不能访问父模板中的变量

• 后备内容(它只会在没有提供内容的时候被渲染)
  将它放在 标签内

• 具名插槽
  格式：
  ps: 一个不带 name 的 出口会带有隐含的名字“default”
  使用：在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

  <!-- <base-layout> 组件 -->
  <div class="container">
    <header>
      <slot name="header"></slot>    <!-- 具名插槽  -->
    </header>
  </div>
  
  <base-layout>
    <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>
  </base-layout>
  

• 作用域插槽

  <!-- current-user组件 -->
  <span>
    <slot :user="user">  <!-- 绑定在 <slot> 元素上的 attribute 被称为插槽 prop -->
      {
       
       {user.lastName}}  <!--后备内容 -->
    </slot>
  </span>
  
  <!-- 使用 -->
  <current-user>
    <template v-slot:default="user">
      {
       
       {user.user.firstName}}   <!--这里注意第一个user是自己重命名的,第二个user是插槽prop的名称-->
    </template>
  </current-user>
  

• 独占默认插槽的缩写语法

  <!-- current-user -->
  <span>
    <slot :user="user"></slot>
  </span>
  
  <!-- 默认作用域插槽可以缩写为以下形式 -->
  <current-user v-slot="slotProps">
    {
       
       {slotProps.user.firstName}}
  </current-user>
  

  注意:只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法

• 解构插槽Prop

  <current-user v-slot="{ user }">
    {
       
       { user.firstName }}
  </current-user>
  
  <!-- 可以定义后备内容 -->
  <current-user v-slot="{ user = { firstName: 'Guest' } }"> <!-- 赋予默认值 -->
    {
       
       { user.firstName }}
  </current-user>
  

• 具名插槽的缩写
  v-slot:header 可以缩写为 #header
  v-slot=“user” 可以缩写为 #default="{ user }"