Vue插槽slot詳細(xì)介紹(對(duì)比版本變化,避免踩坑)

更新時(shí)間：2022年06月16日 10:30:58 作者：前端不釋卷leo

Vue中的Slot對(duì)于編寫(xiě)可復(fù)用可擴(kuò)展的組件是再合適不過(guò)了,下面這篇文章主要給大家介紹了關(guān)于Vue插槽slot詳細(xì)介紹的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

插槽是什么？

插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot> 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽。簡(jiǎn)單理解就是子組件中留下個(gè)“坑”，父組件可以使用指定內(nèi)容來(lái)補(bǔ)“坑”。以下舉例子幫助理解。

怎么使用插槽？

基本用法

現(xiàn)在，有兩個(gè)組件，A與B，分別如下：

A.vue

<template>
  <div>
    <p>我是A組件</p>
  </div>
</template>
 
<script>
export default {
  name:'A',
  data(){
    return {
 
    }
  }
}
</script>

B.vue

<template>
  <div>
    <p>我是B組件</p>
  </div>
</template>
 
<script>
export default {
  name:'B',
  data(){
    return {
 
    }
  }
}
</script>

將B組件引入A組件里面（此時(shí)B為A的子組件）

<template>
  <div>
    <p>我是A組件</p>
    <B><B/>
  </div>
</template>
 
<script>
import B from './B.vue'    //引入B組件
export default {
  name:'A',
  components:{      //注冊(cè)B組件
    B
  },
  data(){
    return {
 
    }
  }
}
</script>

頁(yè)面效果如下：

準(zhǔn)備工作完畢，現(xiàn)在，在B組件里面使用插槽（slot）

<template>
  <div>
    <p>我是B組件</p>
    <slot></slot>     //插槽的使用方式
  </div>
</template>
 
<script>
export default {
  name:'B',
  data(){
    return {
 
    }
  }
}
</script>

此時(shí)頁(yè)面并無(wú)變化（最開(kāi)始的情況），當(dāng)然，B組件中使用了插槽slot之后，相當(dāng)于留下了一個(gè)“坑”，占了個(gè)位置。那么如何驗(yàn)證其存在了呢？

此時(shí)，修改A組件里面的代碼

<template>
  <div>
    <p>我是A組件</p>
    <B>  
      驗(yàn)證插槽是否生效      //用B組件標(biāo)簽包裹內(nèi)容，驗(yàn)證slot
    </B>
  </div>
</template>
 
<script>
import B from './B.vue'
export default {
  name:'A',
  components:{
    B
  },
  data(){
    return {
 
    }
  }
}
</script>

此時(shí)頁(yè)面的效果如下：

頁(yè)面中多出了在A中用B包裹的內(nèi)容。沒(méi)錯(cuò)，這就是插槽的基本使用，是不是很簡(jiǎn)單？

Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設(shè)計(jì)靈感源自 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口。

如上面的例子，當(dāng)組件渲染的時(shí)候，<slot></slot> 將會(huì)被替換為“驗(yàn)證插槽是否生效”（即指定內(nèi)容）。插槽內(nèi)可以包含任何模板代碼，包括 HTML：

<template>
  <div class="main">
    <p>我是A組件</p>
    <B>
      <span style="color:red">驗(yàn)證插槽是否生效</span>    //內(nèi)容為html
    </B>
  </div>
</template>

頁(yè)面效果如下：

插槽內(nèi)也可以放其他組件，如此時(shí)再新建一個(gè)組件C：

<template>
  <div>
    <p>我是C組件</p>
  </div>
</template>
 
<script>
export default {
  name:'C',
  data(){
    return {
 
    }
  }
}
</script>

在A組件中，將B組件包裹的內(nèi)容換成C組件：

<template>
  <div class="main">
    <p>我是A組件</p>
    <B>
      <!-- <span style="color:red">驗(yàn)證插槽是否生效</span> -->
      <C />         //插入C組件
    </B>
  </div>
</template>
 
<script>
import B from './B.vue'
import C from './C.vue'   //引入C組件
export default {
  name:'A',
  components:{
    B,
    C      //注冊(cè)C組件
  },
  data(){
    return {
 
    }
  }
}
</script>

頁(yè)面效果如下：

此時(shí)檢查頁(yè)面元素，我們會(huì)發(fā)現(xiàn)，在原本B組件中<slot></slot>的位置，替換成了C組件：

//B.vue
<template>
  <div>
    <p>我是B組件</p>
    <slot></slot>
  </div>
</template>
 
//觀察頁(yè)面元素,<slot></slot>被替換成C組件

也印證了開(kāi)篇對(duì)插槽作用的解釋?zhuān)词褂?lt;slot></slot>的組件指定的位置留一個(gè)坑，如果在外部，使用其組件包裹某內(nèi)容（可以是任何模板代碼，也可以是HTML，還可以是組件），則該內(nèi)容就會(huì)被分發(fā)到<slot></slot>處（一個(gè)有趣的說(shuō)法就是把“坑”補(bǔ)上），渲染出來(lái)。當(dāng)然，也可以不放任何內(nèi)容，不影響組件渲染，就好比最開(kāi)始的情況。

注意：如果B組件的 template 中沒(méi)有包含一個(gè) <slot> 元素，即不使用插槽，則該組件起始標(biāo)簽和結(jié)束標(biāo)簽之間的任何內(nèi)容都會(huì)被拋棄。例如：

//B.vue
<template>
  <div>
    <p>我是B組件</p>
    <!-- <slot></slot> -->   //不使用插槽
  </div>
</template>

//A.vue
<template>
  <div>
    <p>我是A組件</p>
    <B>
      <!-- <span style="color:red">驗(yàn)證插槽是否生效</span> -->
      <C />
    </B>
  </div>
</template>
 
//此時(shí)在<B></B>包裹的內(nèi)容都會(huì)被拋棄

頁(yè)面效果如下，在B組件中插入的C組件被拋棄了，因?yàn)锽組件中沒(méi)使用插槽：

后備（默認(rèn)）內(nèi)容

有時(shí)為一個(gè)插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的，它只會(huì)在沒(méi)有提供內(nèi)容的時(shí)候被渲染。例如在B組件中：

<template>
  <div>
    <slot></slot>
  </div>
</template>

我們可能希望這個(gè)B組件內(nèi)絕大多數(shù)情況下都渲染文本“我是B組件”。為了將“我是B組件”作為后備內(nèi)容，我們可以將它放在 <slot> 標(biāo)簽內(nèi)：

<template>
  <div>
    <slot><p>我是B組件</p></slot>
  </div>
</template>

現(xiàn)在當(dāng)我在一個(gè)父級(jí)組件中使用B組件并且不提供任何插槽內(nèi)容時(shí)：

<B></B>

后備內(nèi)容“我是B組件”將會(huì)被渲染：

但是如果我們提供內(nèi)容：

<B>
  <p>我是插槽內(nèi)容</p>
</B>

則這個(gè)提供的內(nèi)容將會(huì)被渲染從而取代后備內(nèi)容：

具名插槽

所謂具名插槽，顧名思義就是起了名字的插槽。有時(shí)我們需要多個(gè)插槽，例如當(dāng)我們想使用某種通用模板：

<template>
  <div>
    <header>
      <!-- 我們希望把頁(yè)頭放這里 -->
    </header>
    <main>
      <!-- 我們希望把主要內(nèi)容放這里 -->
    </main>
    <footer>
      <!-- 我們希望把頁(yè)腳放這里 -->
    </footer>
  </div>
</template>

對(duì)于這樣的情況，<slot> 元素有一個(gè)特殊的 attribute：name。這個(gè) attribute 可以用來(lái)定義額外的插槽：

//B.vue
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

一個(gè)不帶 name 的 <slot> 出口會(huì)帶有隱含的名字“default”。

在向具名插槽提供內(nèi)容的時(shí)候，我們可以在一個(gè) <template> 元素上使用 slot 指令，并以 slot 的參數(shù)的形式提供其名稱(chēng)（當(dāng)然也可以直接放在標(biāo)簽中，如<div slot="header">）：

<template>
  <div>
    <p>我是A組件</p>
    <B>
      <template slot="header">
        <p>我是header部分</p>
      </template>
 
      <p>我是main（默認(rèn)插槽）部分</p>
 
      <template slot="footer">
        <p>我是footer部分</p>
      </template>
    </B>
  </div>
</template>

現(xiàn)在 <template> 元素中的所有內(nèi)容都將會(huì)被傳入相應(yīng)的插槽。任何沒(méi)有被包裹在帶有slot 的 <template> 中的內(nèi)容都會(huì)被視為默認(rèn)插槽的內(nèi)容。

頁(yè)面效果如下：

觀察頁(yè)面元素，內(nèi)容被放入相應(yīng)名字的插槽中：

Tips：說(shuō)到這里就不得不提一下，這種方式在項(xiàng)目中比較常用，可以當(dāng)成一個(gè)復(fù)用（通用）模板組件。如多個(gè)組件的布局使用相似模板，只是具體內(nèi)容不同，那么我們可以使用這種插槽方式封裝成一個(gè)通用組件，在其他組件使用的時(shí)候只需要傳對(duì)應(yīng)的內(nèi)容到對(duì)應(yīng)名字的插槽即可，不需要將該模板在每個(gè)組件重新寫(xiě)一遍，減少代碼冗余，大大提高開(kāi)發(fā)效率。

作用域插槽

有時(shí)讓插槽內(nèi)容能夠訪問(wèn)子組件中才有的數(shù)據(jù)是很有用的?，F(xiàn)在，假設(shè)B組件：

<template>
  <div>
    <p>我是B組件</p>
    <slot>{{obj.firstName}}</slot>
  </div>
</template>
 
<script>
export default {
  name:'B',
  data(){
    return {
      obj:{
        firstName:'leo',
        lastName:'lion'
      }
    }
  }
}
</script>

我們可能想換掉備用內(nèi)容，用“lion”來(lái)顯示。如下，在A組件：

<template>
  <div>
    <p>我是A組件</p>
    <B>
      {{obj.lastName}}
    </B>
  </div>
</template>

然而上述代碼不會(huì)正常工作，因?yàn)橹挥蠦組件可以訪問(wèn)到 obj，而我們提供的內(nèi)容是在父級(jí)渲染的，即在父級(jí)作用域中。頁(yè)面并無(wú)變化：

為了讓 obj在父級(jí)的插槽內(nèi)容中可用，我們可以將 obj作為 <slot> 元素的一個(gè) attribute 綁定上去：

<template>
  <div>
    <p>我是B組件</p>
    <slot :obj="obj">{{obj.firstName}}</slot>
  </div>
</template>

綁定在 <slot> 元素上的 attribute 被稱(chēng)為插槽 prop?，F(xiàn)在在父級(jí)作用域中，我們可以使用帶值的 slot-scope 來(lái)定義我們提供的插槽 prop 的名字：

<template>
  <div class="main">
    <p>我是A組件</p>
    <B>
      <template slot-scope="data">
        {{data.obj.lastName}}
      </template>
    </B>
  </div>
</template>

在這個(gè)例子中，我們選擇將包含所有插槽 prop 的對(duì)象命名為 data，但你也可以使用任意你喜歡的名字。此時(shí)頁(yè)面效果如下：

如果你有使用過(guò)ElementUI里面的表格el-table，當(dāng)改變某一列展示的字段時(shí)，我們經(jīng)常使用：

<el-table-column>
  <template slot-scope="scope">
    <span>{{scope.row.xxx}}</span>
  </template>
</el-table-column>

插槽版本變化

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由來(lái)參見(jiàn)這份 RFC。在接下來(lái)所有的 2.x 版本中 slot 和 slot-scope attribute 仍會(huì)被支持，但已經(jīng)被官方廢棄且不會(huì)出現(xiàn)在 Vue 3 中。也就是說(shuō)，在vue2版本中，我們?nèi)钥梢允褂胹lot跟slot-scope，但是在vue3中就只能使用v-slot了。

原來(lái)的帶有slot的具名插槽

//B.vue
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

寫(xiě)法變化，使用v-slot

<template>
  <div>
    <p>我是A組件</p>
    <B>
      <template v-slot:header>
        <p>我是header部分</p>
      </template>
 
      <p>我是main（默認(rèn)插槽）部分</p>
 
      <template v-slot:footer>
        <p>我是footer部分</p>
      </template>
    </B>
  </div>
</template>

原來(lái)的作用域插槽

<template>
  <div class="main">
    <p>我是A組件</p>
    <B>
      <template slot-scope="data">
        {{data.obj.lastName}}
      </template>
    </B>
  </div>
</template>

寫(xiě)法變化，使用v-slot

<template>
  <div class="main">
    <p>我是A組件</p>
    <B>
      <template v-slot="data">
        {{data.obj.lastName}}
      </template>
    </B>
  </div>
</template>

在 2.6.0 中，為具名插槽和作用域插槽引入了一個(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute。新語(yǔ)法的由來(lái)可查閱這份 RFC。注意slot版本變化，vue2中仍可以使用slot與slot-scope，但是vue3只能使用v-slot了，切記，避免踩坑。