Vue3中插槽(slot)用法匯總
什么是插槽
簡單來說就是子組件中的提供給父組件使用的一個(gè)坑位，用<slot></slot> 表示，父組件可以在這個(gè)坑位中填充任何模板代碼然后子組件中<slot></slot>就會被替換成這些內(nèi)容。比如一個(gè)最簡單插槽例子。
//父組件
<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)然這之間你可以傳入任何代碼片段，都會被放到<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變量。所以子組件 插槽是可以訪問到父組件的數(shù)據(jù)作用域，而插槽內(nèi)容是無法訪問子組件的數(shù)據(jù)（即父組件中兩個(gè)<Child>之間是不能使用子組件中的數(shù)據(jù)的），這就是所謂的渲染作用域。后面會介紹插槽向插槽內(nèi)容傳參的方式。
默認(rèn)內(nè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è) 插槽滿足不了我們的需求，我們需要多個(gè) 插槽。于是就有了具名插槽，就是具有名字的 插槽。簡單來說這個(gè)具名插槽的目的就是讓一個(gè)蘿卜一個(gè)坑，讓它們呆在該呆的位置去。比如帶 name 的插槽 <slot name="xx">被稱為具名插槽。沒有提供 name 的 <slot> 會隱式地命名為“default”。在父組件中可以使用v-slot:xxx（可簡寫為#xxx） 指令的 <template> 元素將目標(biāo)插槽的名字傳下去匹配對應(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縮寫 -->
<template #smallTurnip>
小蘿卜
</template>
<template #midTurnip>
中蘿卜
</template>
<template #bigTurnip>
大蘿卜
</template>
</Child>
</div>
</template>
<script setup>
import Child from './Child.vue'
</script>
所以父組件中無需在意順序，只需要寫好模板命好名，它就會自動去到它所對應(yīng)的位置。
動態(tài)插槽名
動態(tài)插槽名就是插槽名變成了變量的形式，我們可以隨時(shí)修改這個(gè)變量從而展示不同的效果。它的寫法是v-slot:[變量名]或者縮寫為#[變量名]。
//父組件
<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>作用域插槽
上面說過插槽內(nèi)容是無法訪問子組件的數(shù)據(jù)的，但是如果我們想在插槽內(nèi)容訪問子組件的狀態(tài)該怎么辦呢？
其實(shí)插槽可以像對組件傳遞 props 那樣，在slot標(biāo)簽綁定屬性從而傳遞給父組件中的插槽內(nèi)容。首先來看下默認(rèn)插槽的傳值方式。
//子組件
<template>
<div>
<slot persnotallow="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)槟憬壎?/span>name它就成了具名插槽了。同樣具名插槽中的name屬性也不會傳遞給插槽內(nèi)容。因?yàn)閭鬟f的參數(shù)只能在插槽內(nèi)容中使用，所以這類能夠接受參數(shù)的插槽就被稱為了作用域插槽。
具名作用域插槽
下面再看下具名作用域插槽它的傳參方式。它接收參數(shù)的方式是通過template標(biāo)簽的指令v-slot的值獲取的，所以可以縮寫成這樣。
//父組件
<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>
這類插槽便是具名作用域插槽啦！
寫在最后
到這里插槽(slot)的全部用法基本就已經(jīng)介紹完啦。
