Vue的slot插槽(默认插槽、具名插槽、作用域插槽)

最新推荐文章于 2025-06-07 20:00:00 发布

Bulut0907

最新推荐文章于 2025-06-07 20:00:00 发布

阅读量1.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js slot插槽默认插槽具名插槽作用域插槽

本文链接：https://blog.csdn.net/yy8623977/article/details/132078099

1. slot插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件向子组件传递数据

1.1 默认插槽

Category.vue：

定义一个插槽。等着组件的使用者进行填充
可以在子组件Category.vue给插入的html结构定义CSS样式，也可以在父组件App.vue给插入的html结构定义CSS样式

<template>
	<div class="category">
		<h3>{
  
  {title}}分类</h3>
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 200px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

App.vue：直接在使用子组件的标签中，插入html结构，同时可以传递数据到html。如果子组件不定义slot插槽，则插入的html结构保存在子组件的$slots上

<template>
	<div class="container">
		<Category title="风景" >
			<img src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="">
		</Category>

		<Category title="游戏" >
			<ul>
				<li v-for="(game,index) in games" :key="index">{
  
  {game}}</li>
			</ul>
		</Category>

		<Category title="电影">
			<video c