Vue插槽学习笔记

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

插槽内容

可以简单理解为在我们组件标签中包含内容是需要使用插槽的，也是需要用到slot元素，否则该组件起始标签和结束标签之间的任何内容都会被抛弃

不使用插槽，下面的写法是无法渲染组件中包含的内容的

<!-- todo-button 组件模板 -->

<button class="btn-primary">
  Create a new item
</button>

<todo-button>
  <!-- 以下文本不会渲染 -->
  Add todo
</todo-button>

插槽写法，可以正常展示组件中包含的字符串、HTML、组件

<!-- todo-button 组件模板 -->
<button class="btn-primary">
  <slot></slot>
</button>

<button class="btn-primary">
  Add todo
</button>

<todo-button>
  <!-- 添加一个Font Awesome 图标 -->
  <i class="fas fa-plus"></i>
  Add todo
</todo-button>

<todo-button>
    <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="plus"></font-awesome-icon>
  Add todo
</todo-button>

渲染作用域

插槽可以访问与模板其余部分相同的实例 property (即相同的“作用域”)

<todo-button>
  Delete a {{ item.name }}
</todo-button>

插槽不能访问 <todo-button> 的作用域。例如，尝试访问 action 将不起作用

<todo-button action="delete">
  Clicking here will {{ action }} an item
  <!-- `action` 未被定义，因为它的内容是传递*到* <todo-button>，而不是*在* <todo-button>里定义的。  -->
</todo-button>

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

备用内容

可以简单理解为给插槽提供默认值进行展示，当组件中不包含内容时默认展示

<!-- submit-button 组件模板 -->
<button type="submit">
  <slot>Submit</slot>
</button>

使用submit-button 组件不包含内容会默认渲染Submit

<submit-button></submit-button>

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

使用submit-button 组件包含内容会渲染包含的内容

<submit-button>
  Save
</submit-button>

<button type="submit">
  Save
</button>

具名插槽

主要使用场景为一个组件下需要用到多个插槽来渲染不同的内容做区分，类似下面的base-layout组件

<!-- base-layout 组件模板 -->
<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

针对上面组件的情况，插槽这边有一个特殊的name属性，这个属性可以用来定义额外的插槽，在渲染内容的时候可以区分开来

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

不带 name 的 <slot> 出口会带有隐含的名字“default”

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称,代码如下

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

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

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

渲染后的HTML如下

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

注意，v-slot 只能添加在 <template> 上，只有一种例外情况，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上

作用域插槽

todo-list组件

app.component('todo-list', {
  data() {
    return {
      items: ['Feed a cat', 'Buy milk']
    }
  },
  template: `
    <ul>
      <li v-for="(item, index) in items">
        {{ item }}
      </li>
    </ul>
  `
})

如果想在使用todo-list组件时在插槽里用到该组件的数据，就需要在组件中进行属性绑定

<ul>
  <li v-for="( item, index ) in items">
    <slot :item="item"></slot>
  </li>
</ul>

<ul>
  <li v-for="( item, index ) in items">
    <slot :item="item" :index="index" :another-attribute="anotherAttribute"></slot>
  </li>
</ul>

使用todo-list组件，在插槽中使用绑定的属性

<todo-list>
  <template v-slot:default="slotProps">
    <i class="fas fa-check"></i>
    <span class="green">{{ slotProps.item }}</span>
  </template>
</todo-list>

独占默认插槽的缩写语法

当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上

<todo-list v-slot:default="slotProps">
  <i class="fas fa-check"></i>
  <span class="green">{{ slotProps.item }}</span>
</todo-list>

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽

<todo-list v-slot="slotProps">
  <i class="fas fa-check"></i>
  <span class="green">{{ slotProps.item }}</span>
</todo-list>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确

<!-- 无效，会导致警告 -->
<todo-list v-slot="slotProps">
  <i class="fas fa-check"></i>
  <span class="green">{{ slotProps.item }}</span>
  
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</todo-list>

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

<todo-list>
  <template v-slot:default="slotProps">
    <i class="fas fa-check"></i>
    <span class="green">{{ slotProps.item }}</span>
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</todo-list>

结构插槽Prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里

function (slotProps) {
  // ... 插槽内容 ...
}

所以我们可以使用es6来解构插槽的值

<todo-list v-slot="{ item }">
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}</span>
</todo-list>

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 item 重命名为 todo

<todo-list v-slot="{ item: todo }">
  <i class="fas fa-check"></i>
  <span class="green">{{ todo }}</span>
</todo-list>

还可以定义备用内容，就是默认值的意思，用于插槽传值为undefined的情形

<todo-list v-slot="{ item = 'Placeholder' }">
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}</span>
</todo-list>

动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名

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

具名插槽的缩写

v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

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

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

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

参考地址：Vue官网插槽