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

目录

  • [1. slot插槽](#1. slot插槽)
    • [1.1 默认插槽](#1.1 默认插槽)
    • [1.2 具名插槽](#1.2 具名插槽)
    • [1.3 作用域插槽](#1.3 作用域插槽)

1. slot插槽

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

1.1 默认插槽

Category.vue:

  • 定义一个插槽。等着组件的使用者进行填充

  • 可以在子组件Category.vue给插入的html结构定义CSS样式,也可以在父组件App.vue给插入的html结构定义CSS样式

    <template>

    {{title}}分类

    <slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
    </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 controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['红色警戒','穿越火线']
			}
		}
	}
</script>

<style scoped>
	.container{
		display: flex;
    /*主轴对其,每个元素之间分配相同的空间*/
		justify-content: space-around;
	}
</style>

显示效果如下:

1.2 具名插槽

Category.vue:给slot定义name属性,区分不同的插槽

复制代码
<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot name="center">我是一些默认值,当使用者没有传递具体结构时,center插槽会出现</slot>
		<slot name="footer">我是一些默认值,当使用者没有传递具体结构时,footer插槽会出现</slot>
	</div>
</template>

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

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

App.vue:

  • 通过slot属性将html结构放入不同的slot插槽

  • 可以将多个标签直接放入相同name的插槽

  • 使用template可以将多个标签放入slot插槽,还不用多一层标签。v-slot只能在template标签上使用

    <template>
    <Category title="风景" > 更多风景 </Category>
    复制代码
      	<Category title="游戏" >
      		<ul slot="center">
      			<li v-for="(game,index) in games" :key="index">{{game}}</li>
      		</ul>
      		<div class="foot" slot="footer">
      			<a href="http://www.baidu.com">单机游戏</a>
      			<a href="http://www.baidu.com">网络游戏</a>
      		</div>
      	</Category>
    
      	<Category title="电影">
      		<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      		<template v-slot:footer>
      			<div class="foot">
      				<a href="http://www.baidu.com">经典</a>
      				<a href="http://www.baidu.com">热门</a>
      			</div>
      			<h4>欢迎前来观影</h4>
      		</template>
      	</Category>
      </div>
    </template> <script> import Category from './components/Category' export default { name:'App', components:{Category}, data() { return { games:['红色警戒','穿越火线'] } } } </script> <style scoped> .container,.foot{ display: flex; justify-content: space-around; } h4{ text-align: center; } </style>

显示效果如下:

1.3 作用域插槽

理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。例如games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定

Category.vue:将多个属性以object的方式,传递给slot的使用者

复制代码
<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="游戏很好玩吧">我是默认的一些内容</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
		data() {
			return {
				games:['红色警戒','穿越火线'],
			}
		},
	}
</script>

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

App.vue:slot的使用者接收数据,然后将数据以不同的html结构插入到slot插槽

复制代码
<template>
	<div class="container">

		<Category title="游戏">
      <!-- slot的使用者接收数据 -->
			<template v-slot="obj">
				<ul>
					<li v-for="(game,index) in obj.games" :key="index">{{game}}</li>
				</ul>
        <h4>{{obj.msg}}</h4>
			</template>
		</Category>

		<Category title="游戏">
			<template v-slot="{games}">
				<ol>
					<li style="color:red" v-for="(game,index) in games" :key="index">{{game}}</li>
				</ol>
			</template>
		</Category>

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

	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

效果如下:

相关推荐
萌萌哒草头将军2 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
Zz_waiting.5 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者6 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者6 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_456904276 小时前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu6 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
鱼钓猫6 小时前
H5 电子签名组件
vue.js·canvas
就是帅我不改8 小时前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
香香甜甜的辣椒炒肉9 小时前
vue(7)-单页应用程序&路由
前端·javascript·vue.js
dreams_dream9 小时前
vue中axios与fetch比较
前端·javascript·vue.js