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

什么是插槽

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

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

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

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

<template>
  <p>這是MyCom1組件的第1個(gè)p標(biāo)簽</p>
  <！--封裝組件時(shí)嗎，沒(méi)有預(yù)留任何插槽-->
  <p>這是MyCom1組件最后一個(gè)p標(biāo)簽</p>
</templa>

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

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

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

具名插槽

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

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

注意：沒(méi)有指定 name 名稱(chēng)的插槽， 會(huì)有隱含的名稱(chēng)叫做 “default”。

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

<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>

作用域插槽

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

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

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

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

解構(gòu)插槽 Prop

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

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