快捷導(dǎo)航

Vue3中插槽(slot)用法匯總(推薦)

更新時(shí)間：2022年08月23日 11:25:44 作者：迪迪滴

這篇文章主要介紹了Vue3中插槽(slot)用法匯總,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

什么是插槽

簡(jiǎn)單來(lái)說(shuō)就是子組件中的提供給父組件使用的一個(gè) 坑位 ，用 <slot></slot> 表示，父組件可以在這個(gè)坑位中填充任何模板代碼然后子組件中 <slot></slot> 就會(huì)被替換成這些內(nèi)容。比如一個(gè)最簡(jiǎn)單插槽例子

//父組件
<template>
  <div>
    <Child>Hello Juejin</Child>
  </div>
</template>
<script setup lang="ts">
import Child from './Child.vue'
</script>

//子組件Child
<template>
    <div>
        <p>1</p>
        <slot />
        <p>2</p>
    </div>
</template>

子組件中的 <slot /> 便是父組件放在子組件標(biāo)簽 <Child> 之間的內(nèi)容。當(dāng)然這之間你可以傳入任何代碼片段，都會(huì)被放到 <slot /> 這個(gè)位置。

同樣的你也可以在標(biāo)簽 <Child> 之間放入變量，比如

//父組件
<template>
  <div>
    <Child>{{ msg }}</Child>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Child from './Child.vue'
const msg = ref('Hello Juejin')
</script>

先解釋一下后面頻繁出現(xiàn)的兩個(gè)詞 插槽 和 插槽內(nèi)容 ，防止后面閱讀搞混了：

同樣的 插槽 表示的就是這個(gè) msg 變量。所以子組件 插槽 是可以訪問(wèn)到父組件的數(shù)據(jù)作用域，而 插槽內(nèi)容 是無(wú)法訪問(wèn)子組件的數(shù)據(jù)（即父組件中兩個(gè) <Child> 之間是不能使用子組件中的數(shù)據(jù)的），這就是所謂的渲染作用域。后面會(huì)介紹 插槽 向 插槽內(nèi)容 傳參的方式

默認(rèn)內(nèi)容

在父組件沒(méi)有提供任何 插槽內(nèi)容 的時(shí)候，我們是可以為子組件的 插槽 指定默認(rèn)內(nèi)容的，比如

//子組件
<template>
    <div>
        <slot>我是默認(rèn)內(nèi)容</slot>
    </div>
</template>

//父組件1
<template>
  <div>
    <Child></Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

//父組件2
<template>
  <div>
    <Child>Hello Juejin</Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

此時(shí) 父組件1 展示默認(rèn)內(nèi)容

父組件2 展示提供的內(nèi)容

具名插槽

很多時(shí)候一個(gè) 插槽 滿(mǎn)足不了我們的需求，我們需要多個(gè) 插槽 。于是就有了 具名插槽 ，就是具有名字的 插槽 。簡(jiǎn)單來(lái)說(shuō)這個(gè) 具名插槽 的目的就是讓一個(gè)蘿卜一個(gè)坑，讓它們呆在該呆的位置去。比如帶 name 的插槽 <slot name="xx"> 被稱(chēng)為具名插槽。沒(méi)有提供 name 的 <slot> 會(huì)隱式地命名為“default”。在父組件中可以使用 v-slot:xxx （可簡(jiǎn)寫(xiě)為 #xxx ）指令的 <template> 元素將目標(biāo)插槽的名字傳下去匹配對(duì)應(yīng) 插槽 。比如

//子組件
<template>
    <div>
        <!-- 大蘿卜 -->
        <div>
            <slot name="bigTurnip"></slot>
        </div>
        <!-- 小蘿卜 -->
        <div>
            <slot name="smallTurnip"></slot>
        </div>
        <!-- 中蘿卜 -->
        <div>
            <slot name="midTurnip"></slot>
        </div>
    </div>
</template>

//父組件

<template>
  <div>
    <Child>
      <!-- #smallTurnip 為v-slot:smallTurnip縮寫(xiě) -->
      <template #smallTurnip>
        小蘿卜
      </template>
      <template #midTurnip>
        中蘿卜
      </template>
      <template #bigTurnip>
        大蘿卜
      </template>
    </Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

所以父組件中無(wú)需在意順序，只需要寫(xiě)好模板命好名，它就會(huì)自動(dòng)去到它所對(duì)應(yīng)的位置。

動(dòng)態(tài)插槽名

動(dòng)態(tài)插槽名就是插槽名變成了變量的形式，我們可以隨時(shí)修改這個(gè)變量從而展示不同的效果。它的寫(xiě)法是 v-slot:[變量名] 或者縮寫(xiě)為 #[變量名] 。

//父組件
<template>
  <div>
    <Child>
      <!-- 等同于#smallTurnip -->
      <template #[slotName]>
        小蘿卜
      </template>
      <template #midTurnip>
        中蘿卜
      </template>
      <template #bigTurnip>
        大蘿卜
      </template>
    </Child>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const slotName = ref('smallTurnip')
</script>

作用域插槽

上面說(shuō)過(guò) 插槽內(nèi)容 是無(wú)法訪問(wèn)子組件的數(shù)據(jù)的，但是如果我們想在 插槽內(nèi)容 訪問(wèn)子組件的狀態(tài)該怎么辦呢？

其實(shí) 插槽 可以像對(duì)組件傳遞 props 那樣，在 slot 標(biāo)簽綁定屬性從而傳遞給父組件中的 插槽內(nèi)容 。首先來(lái)看下默認(rèn)插槽的傳值方式

//子組件
<template>
    <div>
        <slot personName="xiaoyue" age="18"></slot>
    </div>
</template>

//父組件

<template>
  <div>
    <Child v-slot="slotProps">
      My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
    </Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

你還可以以結(jié)構(gòu)的形式獲取 slot 提供的數(shù)據(jù)

<template>
  <div>
    <Child v-slot="{ personName, age }">
      My name is {{ personName }} and I am {{ age }} years old this year
    </Child>
  </div>
</template>

注意不能綁定 name 屬性，因?yàn)槟憬壎?nbsp;name 它就成了具名插槽了。同樣具名插槽中的 name 屬性也不會(huì)傳遞給 插槽內(nèi)容 。因?yàn)閭鬟f的參數(shù)只能在 插槽內(nèi)容 中使用，所以這類(lèi)能夠接受參數(shù)的插槽就被稱(chēng)為了 作用域插槽 。

具名作用域插槽

下面再看下 具名作用域插槽 它的傳參方式。它接收參數(shù)的方式是通過(guò) template 標(biāo)簽的指令 v-slot 的值獲取的，所以可以縮寫(xiě)成這樣

//父組件
<template>
  <div>
    <Child>
      <template #bigTurnip="bigTurnipProps">
        {{ bigTurnipProps.message }}
      </template>
    </Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

//子組件Child.vue

<template>
    <div>
        <!-- 大蘿卜 -->
        <div>
            <slot name="bigTurnip" message="我是蘿北"></slot>
        </div>
    </div>
</template>