背景

隨著年齡的增長，很多曾經爛熟于心的技術原理已被歲月摩擦得愈發(fā)模糊起來，技術出身的人總是很難放下一些執(zhí)念，遂將這些知識整理成文，以紀念曾經努力學習奮斗的日子。本文內容并非完全原創(chuàng)，大多是參考其他文章資料整理所得，感謝每位技術人的開源精神。

簡介

本文介紹 Vue3 中如何默認插槽。

在封裝組件時可能存在需要動態(tài)展現的內容區(qū)域，即組件中某一內容區(qū)域在組件定義時并不能確定展現內容，只有當組件被引用時才由父組件指定要展現的內容。Vue 提供插槽（<slot>）作為動態(tài)展現內容區(qū)域的占位符，父組件可以在此占位符區(qū)域內填充具體的展現內容。

Vue 中的插槽包含三類：

• 默認插槽
• 具名插槽
• 作用域插槽

開發(fā)環(huán)境

分類	名稱	版本
操作系統(tǒng)	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

開發(fā)步驟及源碼

1> 創(chuàng)建 Vue3 工程，參考：【Vue3】工程創(chuàng)建及目錄說明。

2> 刪除 src 目錄下 assets 和 components 目錄。

3> 修改 src 目錄下 main.ts。

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 自定義帶插槽的功能組件。

<template><div class="store"><h2>帶插槽的功能組件</h2><slot></slot></div>
</template><script setup lang="ts">
</script><style scoped lang="scss">
.store {background-color: green;box-shadow: 0 0 10px;color: white;padding: 10px;width: 300px;
}
</style>

注意：需要執(zhí)行 npm install -D sass 命令安裝 CSS 預處理器。

5> 修改 Vue 根組件 src/App.vue，引用自定義功能組件。

<template><div class="root"><h1 ref="title">App組件</h1><div class="stores"><Store><ul><li v-for="film in films" :key="film.id">{{ film.name }}</li></ul></Store><Store><ol><li v-for="film in films" :key="film.id">{{ film.name }}</li></ol></Store><Store><h4 v-for="film in films" :key="film.id"># {{ film.name }}</h4></Store></div></div>
</template><script setup lang="ts">
import Store from './components/Store.vue'
import { reactive } from 'vue'const films = reactive([{ id: '001', name: '哈利波特與魔法石'},{ id: '002', name: '哈利波特與密室'},{ id: '003', name: '哈利波特與阿茲卡班的囚徒'},{ id: '004', name: '哈利波特與鳳凰社'},
])
</script><style scoped lang="scss">
.root {background-color: orange;box-shadow: 0 0 10px;padding: 20px;h1 {text-align: center;}.stores {display: flex;justify-content: space-evenly;}
}
</style>

6> 執(zhí)行命令 npm run dev 啟動應用，瀏覽器訪問：http://localhost:5173/。