背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用具名插槽。
Vue 中的插槽包含三类:
- 默认插槽
- 具名插槽
- 作用域插槽
具名插槽,顾名思义是指带有名字的插槽,一个组件中只能包含一个默认插槽,当存在多个插槽时便要使用具名插槽。
注意:默认插槽实际上也是有名称的,为 default
。
开发环境
分类 | 名称 | 版本 |
---|---|---|
操作系统 | Windows | Windows 11 |
IDE | Visual Studio Code | 1.91.1 |
开发步骤及源码
1> 在【Vue3】默认插槽 基础上修改带插槽的功能组件。
<template>
<div class="store">
<slot name="s-title">默认标题</slot>
<hr>
<slot name="s-content">默认内容</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>
具名插槽即在 <slot>
标签中添加 name
属性,<slot>
标签中的内容为默认显示内容,当父组件未指定插槽位置应该显示的内容时,就显示此默认内容。
2> 修改 Vue 根组件 src/App.vue
,引用自定义功能组件。
<template>
<div class="root">
<h1 ref="title">App组件</h1>
<div class="stores">
<Store>
<template v-slot:s-title>
无序列表
</template>
<template v-slot:s-content>
<ul>
<li v-for="film in films" :key="film.id">{{ film.name }}</li>
</ul>
</template>
</Store>
<Store>
<template #s-content>
<ol>
<li v-for="film in films" :key="film.id">{{ film.name }}</li>
</ol>
</template>
<template #s-title>
有序列表
</template>
</Store>
<Store>
</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>
父组件需要将动态显示内容包裹在 <template>
标签内,且在 <template>
标签内指定插槽名称,格式:v-slot:插槽名称
,简写:#插槽名称
。因为已通过插槽名称指定内容显示区域,所以 <template>
标签顺序不要求与组件定义的插槽顺序保持一致。
3> 执行命令 npm run dev
启动应用,浏览器访问:http://localhost:5173/
。