Vue3中插槽slot的使用方法詳解

更新時間：2024年11月27日 11:33:05 作者：不懂得小白

在Vue?3中,插槽（slot）是一種強大的內容分發(fā)API,它允許組件的模板開發(fā)者定義一種插槽,下面就跟隨小編一起來學習一下它的具體使用吧

在Vue 3中，插槽（slot）是一種強大的內容分發(fā)API，它允許組件的模板開發(fā)者定義一種插槽，讓父組件的模板內容能夠插入到子組件的視圖結構中的指定位置。這種機制使得組件的復用性和靈活性得到了極大的提升。以下是使用Vue 3插槽的幾個主要原因：

內容分發(fā)：

插槽允許子組件定義一個或多個插槽位置，而父組件則可以將自己的內容插入到這些位置中。這使得父組件能夠定制子組件的某些部分，同時保留子組件的其余結構和功能。

組件復用：

通過插槽，你可以創(chuàng)建高度可復用的組件，這些組件可以在不同的上下文中使用，并且能夠根據不同的需求展示不同的內容。這減少了重復代碼，提高了開發(fā)效率。

靈活性和可擴展性：

插槽提供了靈活的布局選項，使得開發(fā)者能夠根據需要輕松地調整組件的顯示方式。此外，通過定義具名插槽和作用域插槽，你可以進一步控制插槽的內容和行為，從而實現更復雜的組件交互。

維護性：

使用插槽可以將組件的邏輯和顯示內容分離，使得組件的維護變得更加容易。當你需要修改組件的顯示方式時，只需要在父組件中調整插槽的內容即可，而無需修改子組件的代碼。

Vue 3的改進：

Vue 3對插槽API進行了改進，引入了<script setup>語法糖，使得插槽的使用更加簡潔和直觀。此外，Vue 3還支持了動態(tài)插槽名和插槽內容分發(fā)，進一步增強了插槽的靈活性和功能。

社區(qū)支持和生態(tài)系統：

Vue作為一個流行的前端框架，擁有龐大的社區(qū)支持和豐富的生態(tài)系統。使用Vue 3插槽可以讓你利用這些資源，快速構建高質量的Web應用程序。

在Vue 3中，插槽(slot)的使用方法主要有以下幾種

默認插槽
具名插槽
動態(tài)插槽名
作用域插槽

1. 默認插槽

默認插槽：是最基本的插槽類型，它沒有名稱，用于接收父組件傳遞的未明確指定插槽名稱的內容

1. 子組件 ChildComponent.vue

<template>
  <div>
    <h2>我是默認插槽（子組件）</h2>
    <slot></slot> <!-- 默認插槽 -->
  </div>
</template>

2. 父組件 ParentComponent.vue

<template>
  <div>
    <h1>父組件</h1>
    <ChildComponent>
      <p>這是默認插槽的內容</p>
    </ChildComponent>
  </div>
</template>
 
<script setup>
 
import ChildComponent from './ChildComponent.vue';
 
</script>

2. 具名插槽

具名插槽：允許在子組件中定義多個插槽，每個插槽都有一個唯一的名稱。父組件可以通過指定插槽的名稱來將內容插入到對應的插槽中

1. 子組件 ChildComponent.vue

<template>
  <div>
    <h2>ChildComponent</h2>
    <slot name="header"></slot> <!-- 具名插槽 -->
    <slot></slot> <!-- 默認插槽 -->
    <slot name="footer"></slot> <!-- 具名插槽 -->
  </div>
</template>

2. 父組件 ParentComponent.vue

<template>
  <div>
  <h1>ParentComponent</h1>
    <ChildComponent>
      <template v-slot:header>
        <h3>具名插槽1</h3>
      </template>
      <p>默認插槽.</p>
      <template v-slot:footer>
        <p>具名插槽2</p>
      </template>
    </ChildComponent>
  </div>
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

運行結果

3. 動態(tài)插槽名

動態(tài)插槽名：允許父組件根據條件動態(tài)地選擇將內容插入到哪個插槽中。

1. 子組件 ChildComponent.vue

<template>
  <div>
    <h2>ChildComponent</h2>
    <slot name="header"></slot> <!-- 具名插槽 -->
    <slot></slot> <!-- 默認插槽 -->
    <slot name="footer"></slot> <!-- 具名插槽 -->
  </div>
</template>

2. 父組件 ParentComponent.vue

<template>
  <div>
    <h1>ParentComponent</h1>
    <ChildComponent>
      <template v-slot:[dynamicSlotName]>
        <p>動態(tài)插槽名.</p>
      </template>
      <template v-slot:footer>
        <p>動態(tài)插槽名</p>
      </template>
    </ChildComponent>
  </div>
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
 
import {ref} from "vue";
let dynamicSlotName  = ref('header') // 可以根據條件動態(tài)改變這個值
 
 
</script>

動態(tài)插槽名在<script setup>中不太常見，因為通常動態(tài)邏輯會在模板中處理

但如果你確實需要在<script setup>中處理動態(tài)插槽名，你可以考慮在模板中使用計算屬性或方法來動態(tài)生成插槽名。不過由于Vue模板語法的限制，直接在模板中動態(tài)綁定插槽名可能不太直觀通常會在模板中直接使用條件渲染來模擬這種效果。

4. 作用域插槽

作用域插槽：允許子組件向父組件傳遞數據，父組件可以使用這些數據來渲染插槽內容。

1. 子組件 ChildComponent.vue

<template>
  <div>
    <h2>作用域插槽（子組件）</h2>
    <slot :user="user"></slot> <!-- 作用域插槽 -->
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const user = ref({
  name: '張三',
  age: 100
});
</script>

2. 父組件 ParentComponent.vue

<template>
  <div>
    <h1>Parent Component</h1>
 
    <ChildComponent>
      <template v-slot:default="slotProps">
        <p>用戶名: {{ slotProps.user.name }}</p>
        <p>年齡: {{ slotProps.user.age }}</p>
      </template>
    </ChildComponent>
 
   <!-- 使用解構的方式簡潔易讀 -->
    <ChildComponent v-slot:default="{ user }">
      <p>用戶名: {{ user.name }}</p>
      <p>年齡: {{ user.age }}</p>
    </ChildComponent>
 
 
    <!-- 或者更簡潔地，省略插槽名（在模板中直接寫內容） -->
    <ChildComponent v-slot="{ user }">
      <p>用戶名: {{ user.name }}</p>
      <p>年齡: {{ user.age }}</p>
    </ChildComponent>
  </div>
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

到此這篇關于Vue3中插槽slot的使用方法詳解的文章就介紹到這了,更多相關Vue3插槽slot內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

解決vue select當前value沒有更新到vue對象屬性的問題
今天小編就為大家分享一篇解決vue select當前value沒有更新到vue對象屬性的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue中使用clipboard實現復制功能
這篇文章主要介紹了Vue中結合clipboard實現復制功能 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
vue使用Axios做ajax請求詳解
本篇文章主要介紹了vue使用Axios做ajax請求詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
vue-router 起步步驟詳解
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
vue3組件庫Shake抖動組件搭建過程詳解
這篇文章主要為大家介紹了vue3組件庫Shake抖動組件搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
vue中動態(tài)修改animation效果無效問題詳情
這篇文章主要介紹了vue中動態(tài)修改animation效果無效問題詳情，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-06-06
Vue點擊切換顏色的方法
今天小編就為大家分享一篇Vue點擊切換顏色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue如何清除瀏覽器歷史棧
這篇文章主要介紹了vue如何清除瀏覽器歷史棧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue路由插件之vue-route
這篇文章主要介紹了vue路由插件之vue-route的相關知識，本文通過實例代碼給大家介紹了vue router的使用，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
如何使用vue3+uni-app封裝音樂播放插件
UniApp是一個基于Vue.js開發(fā)的跨平臺應用開發(fā)框架,它可以使用一套代碼同時構建iOS、Android和Web應用,這篇文章主要給大家介紹了關于如何使用vue3+uni-app封裝音樂播放插件的相關資料,需要的朋友可以參考下
2023-11-11