vue中的slot（插槽）

最近忙着寫一些組件，關於插槽這一塊本身仍是用着 slot 和 slot-scope，而後看了一下文檔的更新，因而又從新把「插槽」學習了一篇，下面一段是文檔中的說明:

在 2.6.0 中，咱們爲具名插槽和做用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱這份 RFC。

插槽，也就是slot，slot就是子組件裏的一個佔位符，一個slot的核心問題，就是顯不顯示，顯示的話顯示話，該如何去展現出來，這是由父組件所控制的，可是插槽顯示的位置是由子組件本身所決定的，slot寫在組件template的什麼位置，父組件傳過來的模板將會顯示在什麼位置。

插槽的基本使用方法(匿名插槽)

這是一個子組件，咱們使用了默認插槽(匿名插槽)，父組件的內容將會代替顯示出來

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'children'
}
</script>
複製代碼

// 使用children組件
 <children>代替slot的內容</children>
複製代碼

渲染後的結果

<template>
  <div>
    代替slot的內容
  </div>
</template>
複製代碼

具名插槽

自 2.6.0 起有所更新。已廢棄的使用 slot 特性的語法在這裏。

有時咱們一個組件裏面須要多個插槽。咱們怎麼來區分多個slot，並且不一樣slot的顯示位置也是有差別的.對於這樣的狀況， 元素有一個特殊的特性：name。這個特性能夠用來定義額外的插槽：

• 注意:一個不帶 name 的 出口會帶有隱含的名字「default」。

以下面一個組件,須要多個插槽。如何向組件提供內容呢？

<template>
  <div>
    <header>
      <slot name="header"></slot>
      <slot></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>
複製代碼

在向具名插槽提供內容的時候，咱們能夠在一個 template 元素上使用 v-slot 指令，並以 v-slot 的參數的形式提供其名稱:

<!-- old -->
<children>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
  <template slot="default">
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
</children>

<!-- new -->
<children>
  <template v-slot:header>
  <!--  <template #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>
</children>
複製代碼

渲染後的結果

<template>
  <div>
    <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>
  </div>
</template>
複製代碼

• 注意:v-slot 只能添加在一個 <template> 上 (只有一種例外狀況)，這一點和已經廢棄的 slot特性不一樣。

• 例外狀況: 當被提供的內容只有默認插槽時，組件的標籤才能夠被看成插槽的模板來使用。這樣咱們就能夠把 v-slot 直接用在組件上：

做用域插槽

自 2.6.0 起有所更新。已廢棄的使用 slot-scope 特性的語法在這裏。

有時候，插槽的內容中有須要訪問到子組件裏面的內容，相似子組件裏的slot能夠綁定一些當前做用域，從而傳出來，使用組件時，插槽的內容就能夠拿到slot傳出來的數據,父級的插槽內容可用。

以下，讓後備內容（slot默認內容）user.firstName 替換正常狀況下的user.lastName

<span>
  <slot>
    {{ user.lastName}}
  </slot>
</span>
複製代碼

綁定在 元素上的特性被稱爲插槽 prop。如今在父級做用域中，咱們能夠給 v-slot 帶一個值來定義咱們提供的插槽 prop 的名字：

// slot綁定了當前做用域下user對象
// 爲什slot中還有內容呢？不是由插槽內容填充嗎？在slot中有內容，咱們能夠稱之爲後備內容，
就是slot的默認內容，但咱們使用這個插槽時，卻沒有內容填充，就會顯示其默認的內容。
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
複製代碼

在父級做用域中，咱們能夠給 v-slot 帶一個值來定義咱們提供的插槽 prop 的名字,slotProps能夠任意命名的，經過slotProps.use就拿到了子組件slot傳出來的對象。

<!-- old -->
<children>
  <template slot="default" slot-scope="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</children>

<!-- new -->
<children>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</children>
複製代碼

在上述狀況下，當被提供的內容只有默認插槽時，這樣咱們就能夠把 v-slot 直接用在組件上：

<children v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
</children>
// default能夠省略,默認插槽的縮寫語法
<children v-slot="slotProps">
    {{ slotProps.user.firstName }}
</children>
<!-- 解構插槽 prop -->
<childrenv-slot="{ user }">
    {{ user.firstName }}
</children>
<!-- user 重命名爲 person-->
<childrenv-slot="{ user: person}">
    {{ person.firstName }}
</children>
複製代碼

• 注意:默認插槽的縮寫語法不能和具名插槽混用，由於它會致使做用域不明確,只要出現多個插槽，請始終爲全部的插槽使用完整的基於 template 的語法

後備內容

什麼是後備內容呢，一個slot有它的默認的內容，有時爲一個插槽設置具體的後備 (也就是默認的) 內容是頗有用的，它只會在沒有提供內容的時候被渲染。

總結

這裏只是簡單描述了幾個關鍵點，其實還有不少可擴展的，或其餘特性，咱們仍是須要多去看文檔，多學習。