什么是插槽?
Slot 通俗的理解就是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot
位置)并且可以作为承载分发内容的出口。
简单的来说为了更加抽象的去复用组件而诞生的功能。
默认插槽
在组件中使用<slot></slot>来进行插槽定义,例如
<template>
<h2>{
{ title }}</h2>
<slot></slot>
</template>
<script setup lang="ts">
defineProps(['title'])
</script>
在其他组件调用时调用
<template>
<SlotTwe :title="title1">
<!-- 填入需要定制化的组件 -->
<h2>你好</h2>
</SlotTwe>
</template>
具名插槽
具名插槽本质上就是在默认插槽的基础上,进行相关命名,在使用时通过指定的命名去选择对应的插槽进行填充。
子组件中:
ps:通过name="xx" 来对插槽进行命名。事实上默认插槽的name是“default”
<template>
<div class="item">
<h3>{
{ title }}</h3>
<slot name="s1"></slot>
<slot name="s2"></slot>
</div>
</template>
父组件中:
ps:可使用 v-slot:xx 或 #xx 来指定对应的插槽进行插入
<Category title="今日热门游戏">
<template v-slot:s1>
<ul>
<li v-for="g in games" :key="g.id">{
{ g.name }}</li>
</ul>
</template>
<template #s2>
<a href="">更多</a>
</template>
</Category>
作用域插槽
简单的理解,就是数据由子组件自身决定,而数据的展现形式由组件的使用者来决定。
子组件中:
- 如下games的数据由组件本身提供,但是数据展现的形式由调用者来决定。
- 通过 “:Xxx”来传递数据给调用者
<template>
<div class="category">
<h2>今日游戏榜单</h2>
<slot :games="games" a="哈哈"></slot>
</div>
</template>
<script setup lang="ts" name="Category">
import {reactive} from 'vue'
let games = reactive([
{id:'asgdytsa01',name:'英雄联盟'},
{id:'asgdytsa02',name:'王者荣耀'},
{id:'asgdytsa03',name:'红色警戒'},
{id:'asgdytsa04',name:'斗罗大陆'}
])
</script>
父组件中:
- 组件通过v-slot获取对应数据对象
<Game v-slot="params">
<!-- <Game v-slot:default="params"> -->
<!-- <Game #default="params"> -->
<ul>
<li v-for="g in params.games" :key="g.id">{
{ g.name }}</li>
</ul>
</Game>
v-slot注意点
要注意命名的选择和数据的获取,如下例子
<!-- 选择了名称为S1的插槽,并获取S1插槽中传递过来的数据对象params -->
<Game v-slot:S1="params">