slot

本文涉及的slot有：<slot>，v-slot嗎，vm.$slots，vm.$scopedSlots

廢棄的使用特性：slot，slot-scope，scope（使用v-slot，2.6.0）。

 

<slot>爲vue的內置標籤：用於給組件定義一個插槽，在這個插槽裏傳入內容（能夠是模板代碼或者組件），達到動態改變組件的目的。

v-slot指令：綁定內容到指定插槽，v-slot 只能添加在一個 <template> 上（當父組件中只提供了默認插槽的內容，v-slot能夠寫在組件上，見下面默認插槽縮寫語法）

給插槽設置默認內容，在沒有提供內容的時候被渲染。

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

具名插槽

栗子：<base-layout> 組件

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>//默認插槽，不帶  的  出口會帶有隱含的名字「default」。
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>name<slot>

使用v-slot綁定內容到指定插槽（v-slot縮寫爲#，後面必須跟插槽名）

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>
  //放入默認插槽中  
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
   //放入默認插槽中  
  <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>

沒被包裹在有 v-slot 或包裹在v-slot爲default的<template> 中的內容，會被視爲默認插槽的內容。

v-slot使用動態插槽名：

<base-layout>
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

具備prop的插槽（做用域插槽）

做用：讓插槽內容可以訪問子組件中的數據

<slot :userNmae="user.name">//userNmae叫作插槽prop
</slot>


//父做用域中，v-slot的值爲包含默認插槽全部prop一的個對象，對象名取爲slotProps
 <template #default="slotProps">
    {{ slotProps.userNmae }}
  </template>

做用域插槽的使用：基於輸入的 prop 渲染出不一樣的內容，達到複用插槽的目的。

解構插槽prop

在支持的環境下 (單文件組件或支持解構語法的瀏覽器)，能夠在v-slot裏使用參數解構。

做用域插槽的內部工做原理是將插槽內容包括在一個傳入單個參數的函數裏：

function (slotProps) {
  // 插槽內容
}

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

//參數默認值，用於插槽 prop 是 undefined 的情形
<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

//user 重命名爲 person
<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

只提供了默認插槽內容時的v-slot簡寫

當被提供的內容只有默認插槽時，v-slot 直接用在組件上

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

只要出現多個插槽，請始終爲全部的插槽使用完整的基於 <template> 的語法：

<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> <template v-slot:other="otherSlotProps"> ... </template> </current-user>

vm.$slots

組件vm.$slots.插槽名，返回對應插槽的內容。

栗子：

<anchored-heading :level="1">Hello world!</anchored-heading>

anchored-heading組件的模板爲：

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,  
      this.$slots.default 
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

 anchored-heading 中的 Hello world!，這些子元素被存儲在組件實例中的 $slots.default 中

vm.$scopedSlots

訪問做用域插槽，獲得的是一個返回 VNodes 的函數。

props: ['message'],
render: function (createElement) {
  // `<div><slot :text="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}

在使用渲染函數，不論當前插槽是否帶有做用域，推薦經過 $scopedSlots 訪問。