什么是插槽？怎樣定義和使用插槽？

什么是插槽

插槽(Slot)是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時，把不確定的、希望由用戶指定的部分定義為插槽。

<template>
  <p>這是MyCom1組件的第1個p標簽</p>
  <！--通過slot標簽，為用戶預(yù)留內(nèi)容占位符（插槽）-->
  <slot></slot>
  <p>這是MyCom1組件最后一個p標簽</p>
</template>

<my-com-1>
  <！-在使用 MyCom1 組件時，為插槽指定具體的內(nèi)容-->
  <p>~~~用戶自定義的內(nèi)容~~~</p>
</my-com-1>

如果在封裝組件時沒有預(yù)留任何<slot>插槽，則用戶提供的任何自定義內(nèi)容都會被丟棄。示例代碼如下：

<template>
  <p>這是MyCom1組件的第1個p標簽</p>
  <！--封裝組件時嗎，沒有預(yù)留任何插槽-->
  <p>這是MyCom1組件最后一個p標簽</p>
</templa>

<my-com-1>
  <！--自定義的內(nèi)容會被丟棄-->
  <p>~…-用戶自定義的內(nèi)容~~~</p>
</my-com-1>

封裝組件時，可以為預(yù)留的插槽提供后備內(nèi)容(默認內(nèi)容)。如果組件的使用者沒有為插槽提供任何內(nèi)容，則后備內(nèi)容會生效。示例代碼如下：

<template>
  <p>這是MyCom1組件的第1個p標簽</p>
  <slot>這是后備內(nèi)容</slot>
  <p>這是MyCom1組件最后一個p標簽</p>
</template>

具名插槽

如果在封裝組件時需要預(yù)留多個插槽節(jié)點，則需要為每個插槽指定具體的 name 名稱。這種帶有具體名稱的插槽叫做“具名插槽”。示例代碼如下：

<div class="container">
  <header>
    <！--我們希望把頁頭放這里-->
    <slot name="header"></slot>
  </header>
  <main>
    <！--我們希望把主要內(nèi)容放這里-->
    <slot></slot>
  </main>
  <footer>
    <！--我們希望把頁腳放這里-->
    <slot name="footer"></slot>
  </footer>
</div>

注意：沒有指定 name 名稱的插槽， 會有隱含的名稱叫做 “default”。

在向具名插槽提供內(nèi)容的時候，我們可以在一個<template>元素上使用 v-slot 指令，并以 v-slot 的參數(shù)的形式提供其名稱。示例代碼如下：

<my-com-2>
  <template v-slot:header>   
<h1>滕王閣序</h1>
  </template>
  
<template v-slot:default>
    <p>豫章故郡，洪都新府。</p>
    <p>星分翼，地按街廬。</p>
    <p>襟三江而帶五潮，控蠻荊而引甌越。</p>
  </template>
  
<template v-slot:footer>
    <p>落款：王勃</p>
  </template>
</my-com-2>

作用域插槽

在封裝組件的過程中，可以為預(yù)留的插槽綁定 props 數(shù)據(jù)，這種帶有 props 數(shù)據(jù)的叫做“作用域插槽”。示例代碼如下：

<tbody>
  <!下面的slot是一個作用域插槽-->
  <slot v-for="item in list":user="item"></slot>
</tbody>

可以使用 v-slot: 的形式，接收作用域插槽對外提供的數(shù)據(jù)。示例代碼如下：

<my-com-3>
 <！--1.接收作用域插槽對外提供的數(shù)據(jù)-->
 <template v-slot:default="scope">
    <tr>     
      <！--2.使用作用域插槽的數(shù)據(jù)-->    
      <td>{{scope}}</td>   
    </tr>
 </template>
</my-com-3>

解構(gòu)插槽 Prop

作用域插槽對外提供的數(shù)據(jù)對象，可以使用解構(gòu)賦值簡化數(shù)據(jù)的接收過程。示例代碼如下：

<my-com-3>
  <！--v-slot：可以簡寫成#-->
  <！--作用域插槽對外提供的數(shù)據(jù)對象，可以通過“解構(gòu)賦值”簡化接收的過程-->
  <template #default="{user}">
    <tr>
      <td>{{user.id}}</td>
      <td>{{user.name}}</td>
      <td>{{user.state}}</td>
    </tr>
  </template>
</my-com-3>