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

2022-08-23 14:01:15

什麼是插槽

簡單來說就是子元件中的提供給父元件使用的一個 坑位 ，用 <slot></slot> 表示，父元件可以在這個坑位中填充任何模板程式碼然後子元件中 <slot></slot> 就會被替換成這些內容。比如一個最簡單插槽例子

//父元件
<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 /> 便是父元件放在子元件標籤 <Child> 之間的內容。當然這之間你可以傳入任何程式碼片段，都會被放到 <slot /> 這個位置。

同樣的你也可以在標籤 <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>

先解釋一下後面頻繁出現的兩個詞 插槽 和 插槽內容 ，防止後面閱讀搞混了：

同樣的 插槽 表示的就是這個 msg 變數。所以子元件 插槽 是可以存取到父元件的資料作用域，而 插槽內容 是無法存取子元件的資料（即父元件中兩個 <Child> 之間是不能使用子元件中的資料的），這就是所謂的渲染作用域。後面會介紹 插槽 向 插槽內容 傳參的方式

預設內容

在父元件沒有提供任何 插槽內容 的時候，我們是可以為子元件的 插槽 指定預設內容的，比如

//子元件
<template>
    <div>
        <slot>我是預設內容</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>

此時 父元件1 展示預設內容

父元件2 展示提供的內容

具名插槽

很多時候一個 插槽 滿足不了我們的需求，我們需要多個 插槽 。於是就有了 具名插槽 ，就是具有名字的 插槽 。簡單來說這個 具名插槽 的目的就是讓一個蘿蔔一個坑，讓它們呆在該呆的位置去。比如帶 name 的插槽 <slot name="xx"> 被稱為具名插槽。沒有提供 name 的 <slot> 會隱式地命名為“default”。在父元件中可以使用 v-slot:xxx （可簡寫為 #xxx ）指令的 <template> 元素將目標插槽的名字傳下去匹配對應 插槽 。比如

//子元件
<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>

所以父元件中無需在意順序，只需要寫好模板命好名，它就會自動去到它所對應的位置。

動態插槽名

動態插槽名就是插槽名變成了變數的形式，我們可以隨時修改這個變數從而展示不同的效果。它的寫法是 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>

作用域插槽

上面說過 插槽內容 是無法存取子元件的資料的，但是如果我們想在 插槽內容 存取子元件的狀態該怎麼辦呢？

其實 插槽 可以像對元件傳遞 props 那樣，在 slot 標籤繫結屬性從而傳遞給父元件中的 插槽內容 。首先來看下預設插槽的傳值方式

//子元件
<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>

你還可以以結構的形式獲取 slot 提供的資料

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

注意不能繫結 name 屬性，因為你係結了 name 它就成了具名插槽了。同樣具名插槽中的 name 屬性也不會傳遞給 插槽內容 。因為傳遞的引數只能在 插槽內容 中使用，所以這類能夠接受引數的插槽就被稱為了 作用域插槽 。

具名作用域插槽

下面再看下 具名作用域插槽 它的傳參方式。它接收引數的方式是通過 template 標籤的指令 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>