vue3中的插槽使用
vue3中的插槽使用
vue插槽分三种，默认插槽、具名插槽和作用域插槽，实现在同一个组件中填充不同的内容，项目中也经常会遇到，自己写的可以复用的组件中，经常会用到前2种，而UI组件库中经常会用到作用域插槽，记录一下用法
一、默认插槽
想要实现以下效果：
以下代码是在Markdown中纯手写，没有验证，也没有检查语法，只记录关键内容
一般默认插槽只有一个
父组件：
<template>
<div class="content">
<Category title="今日热门游戏">
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</Category>
<Category title="今日美食城市">
<img :src="imgUrl" alt="">
</Category>
<Category title="今日影视推荐">
<video :src="videoUrl" controls></video>
</Category>
</div>
</template>
<script>
import {ref} from 'vue'
import Category from '@/src/components/Category.vue'
const games = [
{id: 1, name: '英雄联盟'},
{id: 2, name: '王者荣耀'},
{id: 3, name: '红色警戒'},
{id: 4, name: '斗罗大陆'},
]
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>
子组件：
<template>
<div class="item">
<h3>{{ title }}</>
<!-- 默认插槽 -->
<slot></slot>
</div>
</template>
<script>
import {ref} from 'vue'
import Category from '@/src/components/Category.vue'
const games = [
{id: 1, name: '英雄联盟'},
{id: 2, name: '王者荣耀'},
{id: 3, name: '红色警戒'},
{id: 4, name: '斗罗大陆'},
]
defineProps(['title'])
</script>
<style lang='scss'>
.item {
height: 200px;
width: 200px;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
backgroud-color: skyblue;
.title {
width: 100%;
font-size: 20px;
line-height: 20px;
text-align: center;
backgroud-color: orange;
}
}
</style>
默认插槽相对简单，只用在子组件中写上
此外，默认插槽其实有名字，它的名字是#default
二、具名插槽
具名插槽就是给默认插槽加上名字（name），父组件使用的时候加上v-slot:name，或者使用语法糖#name，这样可以让插槽的作用更具体，同时可以写多个插槽
父组件：
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Category>
<template v-slot:s2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</template>
<template v-slot:s1>
<h2>热门游戏列表</h2>
</template>
</Category>
<Category>
<template v-slot:s2>
<img :src="imgUrl" alt="">
</template>
<template v-slot:s1>
<h2>今日美食城市</h2>
</template>
</Category>
<Category>
<template #s2>
<video video :src="videoUrl" controls></video>
</template>
<template #s1>
<h2>今日影视推荐</h2>
</template>
</Category>
</div>
</div>
</template>
<script setup>
import Category from './Category.vue'
import { ref,reactive } from "vue";
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>
子组件：
<template>
<div class="category">
<slot name="s1">默认内容1</slot>
<slot name="s2">默认内容2</slot>
</div>
</template>
<script setup>
</script>
<style scoped>
.category {
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
width: 200px;
height: 300px;
}
</style>
子组件定义了两个具名插槽，分别是s1和s2，父组件在需要写插槽的地方，用v-slot:s（或者#s）来声明这个插槽的位置，即可实现一个子组件中定义多个插槽，而且在父组件中，具名插槽的位置是任意的，不受写的位置的影响，只收子组件中位置的影响
三、作用域插槽
前面可以看到，不管是默认插槽，还是具名插槽，都用在数据父组件给，组件结构子组件给，也就是用父组件的数据去填子组件的结构，在部分特定的情况下，子组件没有向父组件提供数据，但又需要使用插槽，这种情况在UI组件库中非常常见，这样就需要使用作用域插槽了
父组件：
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Game>
<template v-slot="params">
<ul>
<li v-for="y in params.youxi" :key="y.id">
{{ y.name }}
</li>
</ul>
</template>
</Game>
<Game>
<template v-slot="params">
<ol>
<li v-for="item in params.youxi" :key="item.id">
{{ item.name }}
</li>
</ol>
</template>
</Game>
<Game>
<template #default="{youxi}">
<h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
</template>
</Game>
</div>
</div>
</template>
<script setup>
import Game from './Game.vue'
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>
父组件只提供了结构，但是要注意，它使用了v-slot="params"来接收子组件传递的数据
子组件Game.vue
<template>
<div class="game">
<h2>游戏列表</h2>
<slot :youxi="games" x="哈哈" y="你好"></slot>
</div>
</template>
<script setup>
import {reactive} from 'vue'
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
</script>
<style scoped>
.game {
width: 200px;
height: 300px;
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>
子组件通过自定义属性的方式，在插槽中传递了youxi这个响应式的数据，以及两个固定的值x和y
父组件中，通过v-slot="params"接收到的params就是由下面这么个对象：
{
youxi: [...],
x: '哈哈',
y: '你好'
}
子组件没有对插槽命名，所以可以用#default来具名插槽，同时，因为params是对象，也可以使用{youxi}这种方式来解构
这里的作用域插槽虽然写的不是UI组件，但却实现了父组件使用子组件传递过来的数据渲染不同的文档结构