Vue3中插槽(slot)用法匯總-有解無憂

Vue中的插槽相信使用過Vue的小伙伴或多或少的都用過，但是你是否了解它全部用法呢？本篇文章就為大家帶來Vue3中插槽的全部用法來幫助大家查漏補缺，

什么是插槽

簡單來說就是子組件中的提供給父組件使用的一個坑位，用<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>

這類插槽便是具名作用域插槽啦

寫在最后

到這里插槽(slot)的全部用法基本就已經介紹完啦，如果感覺對你有用的話趕緊點贊收藏吧！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502526.html

標籤：其他

上一篇：妙啊！純 CSS 實作拼圖游戲

下一篇：妙啊！純 CSS 實作拼圖游戲