uni-app插槽的使用

最新推荐文章于 2024-09-14 07:41:00 发布

weixin_51093047

最新推荐文章于 2024-09-14 07:41:00 发布

阅读量3.2k

点赞数 1

分类专栏： uniapp 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_51093047/article/details/120631291

版权

uniapp 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Vue中插槽的使用，包括默认插槽的自然插入机制，以及具名插槽的命名和内容匹配规则。通过实例演示了如何在组件间灵活传递内容，以及何时选择默认插槽和具名插槽。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽的定义：

和Vue一样，是实现一套内容分发的 API，实现组件内容的分发

默认插槽：

和具名插槽不同，组件内任意内容都可插入

index.vue:

<template>
	<view class="content">
		<slot1></slot1>
	</view>
</template>
<script>
	import slot1 from "./slot.vue"
	export default {
		components:{
			slot1
		},
	}
</script>
<style>
</style>

有一个slot1组件，此时slot1的内容为：
slot.vue:

<template>
	<view>
		111
	</view>
</template>
<script>
</script>
<style>
</style>

此时界面为
在这里插入图片描述
当我们给组件加插槽，给vue加一点内容时，代码就变成：

<template>
	<view class="content">
		<slot1>
			123
		</slot1>
	</view>
</template>

<template>
	<view>
		111
		<slot></slot>
	</view>
</template>

此界面就变成：
在这里插入图片描述

具名插槽

如果把以上的组件代码修改为带name属性

<template>
	<view>
		111
		<slot name="zs"></slot>
	</view>
</template>

此时，123就会消失。
想要让123再次出现就要把index.vue修改为：

<template>
	<view class="content">
		<slot1>
			<text slot="zs">123</text>
		</slot1>
	</view>
</template>

这是由于具名插槽只会把具有相同的名字的代码块插入相应的位置。