Vue 插槽 slot 标签：
作用：让父组件可以向子组件指定的位置插入一段 html 结构，也属于一种组件之间的通信方式，适用于父传子
不使用插槽：
创建 List 组件，接收父元素传递的数据，用于显示分类列表。
<template>
<div class="list">
<h3>{{ title }}分类</h3>
<ul>
<li v-for="(item, index) in listData" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'List',
props: ['listData', 'title']
}
</script>
<style scoped>
.list {
background-color: skyblue;
width: 200px;
height: 300px;
}
.list h3 {
text-align: center;
background-color: orange;
}
</style>在 Home 页面中引用 List 组件，并传递对应的数据。
<template>
<div class="home">
<List title="美食" :listData="foods"></List>
<List title="游戏" :listData="games"></List>
<List title="电视剧" :listData="films"></List>
</div>
</template>
<script>
import List from "../components/List"
export default {
name: "Home",
components: { List },
data() {
return {
foods: ['小龙虾', '火锅', '烧烤', '大闸蟹'],
games: ['地下城与勇士', '穿越火线', '英雄联盟'],
films: ['《三国》', '《水浒传》', '《西游记》', '《红楼梦》']
}
}
}
</script>
<style scoped>
.home {
display: flex;
justify-content: space-around;
}
</style>注：组件会根据数据渲染不同的内容，但结构都是一样的。如果想在组件中渲染不同的结构，就需要用到 slot 标签了。
备注：组件中的结构并不是一直不变的，有时候需要根据需求动态调整组件的结构内容。
默认插槽：
在 List 组件中，删除不确定的结构，替换为 slot 标签。并且 slot 标签还可以设置默认值。
<template>
<div class="list">
<h3>{{ title }}分类</h3>
<slot>默认值，如果没有传递具体的结构，显示的内容</slot>
</div>
</template>
<script>
export default {
name: 'List',
props: ['title']
}
</script>
<style>
.list {
background-color: skyblue;
width: 200px;
height: 300px;
}
.list h3 {
text-align: center;
background-color: orange;
}
.list img {
width: 100%;
}
</style>在 Home 页面，给每个 List 组件标签添加对应的内容即可。如果没有指定内容，就会显示 slot 标签中的默认值。
<template>
<div class="home">
<List title="美食">
<img src="https://s1.ax1x.com/2023/03/22/ppaRcTI.jpg" alt="">
</List>
<List title="游戏">
<ul>
<li v-for="(item, index) in games" :key="index">{{ item }}</li>
</ul>
</List>
<List title="电视剧"></List>
</div>
</template>
<script>
import List from "../components/List"
export default {
name: "Home",
components: { List },
data() {
return {
games: ['地下城与勇士', '穿越火线', '英雄联盟'],
}
}
}
</script>
<style scoped>
.home {
display: flex;
justify-content: space-around;
}
</style>注：组件标签中的结构在父组件中就会被解析，而不是先传到 slot 中再解析。所以数据要放在父组件中渲染，而样式放在父组件或子组件中都可以。
具名插槽：
如果组件中需要多个插槽，就需要给 slot 标签定义名称了，用于区分存放的内容。
<template>
<div class="list">
<h3>{{ title }}分类</h3>
<slot name="content">第一个插槽</slot>
<slot name="footer">第二个插槽</slot>
</div>
</template>
<script>
export default {
name: 'List',
props: ['title']
}
</script>
<style>
.list {
background-color: skyblue;
width: 200px;
height: 300px;
}
.list h3 {
text-align: center;
background-color: orange;
}
.list img {
width: 100%;
}
.list div {
display: flex;
}
.list a {
display: block;
width: 100%;
text-align: center;
margin-top: 30px;
}
</style>在使用组件时，需要给内容添加 slot 属性，用于指定放到哪个 slot 标签中。
<template>
<div class="home">
<List title="美食">
<img slot="content" src="https://s1.ax1x.com/2023/03/22/ppaRcTI.jpg" alt="">
<a slot="footer" href="https://www.baidu.com">更多美食</a>
</List>
<List title="游戏">
<ul slot="content">
<li v-for="(item, index) in games" :key="index">{{ item }}</li>
</ul>
<div class="foot" slot="footer">
<a href="https://www.baidu.com">单机游戏</a>
<a href="https://www.baidu.com">网络游戏</a>
</div>
</List>
<List title="电视剧">
<p>如果不定义slot属性，是不会显示的</p>
</List>
</div>
</template>
<script>
import List from "../components/List"
export default {
name: "Home",
components: { List },
data() {
return {
games: ['地下城与勇士', '穿越火线', '英雄联盟'],
}
}
}
</script>
<style scoped>
.home {
display: flex;
justify-content: space-around;
}
</style>注：如果不给内容添加 slot 属性，页面中是不会显示这块内容的。例如第三个分类。
备注：还可以使用 v-slot:名称 的方式指定，但是 v-slot 只能在 template 标签中使用。
<List title="电视剧">
<template v-slot:footer>
<p>如果不定义名称，是不会显示的</p>
</template>
</List>原创作者：吴小糖文章来源：https://www.toymoban.com/news/detail-673031.html
创作时间：2023.8.26文章来源地址https://www.toymoban.com/news/detail-673031.html
到了这里，关于Vue插槽 slot 标签的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
