【Vue3】默认插槽

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何默认插槽。

在封装组件时可能存在需要动态展现的内容区域，即组件中某一内容区域在组件定义时并不能确定展现内容，只有当组件被引用时才由父组件指定要展现的内容。Vue 提供插槽（<slot>）作为动态展现内容区域的占位符，父组件可以在此占位符区域内填充具体的展现内容。

Vue 中的插槽包含三类：

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

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

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>

注意：需要执行 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> 执行命令 npm run dev 启动应用，浏览器访问：http://localhost:5173/。