全國(guó)咨詢(xún)/投訴熱線:400-618-4000

首頁(yè)技術(shù)文章正文

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

更新時(shí)間:2022-10-28 來(lái)源:黑馬程序員 瀏覽量:

什么是插槽

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

1666922191722_1.png

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


分享到:
在線咨詢(xún) 我要報(bào)名
和我們?cè)诰€交談!