Vue 插槽Slots

再上一章节uni-app props传递说到了自定义模板如何传递script值，但是如果我们要传递其他的模板样式内容怎么办呢？vue提供了一个更加方便的组件，插槽slots

使用方法

1.在自定义组件里面要插入模板内容的地方写上<slot></slot>

<template>
	<view class="body">
		<view class="header">header头部区域</view>
			<view class="main">
				<slot></slot>
			</view>
		<view class="footer">footer尾部区域</view>
	</view>
</template>

2.再我们的页面上引入这个自定义组件，然后再其中间插入想要插入的模板内容，并可以对其设置样式，注意：这个样式不是设置再自定义组件里面，而是设置再你的页面上

<template>
	<view class="box">
		<template-body>
			<view class="main_box">插槽插入样式</view>
		</template-body>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.box{
		.main_box{
		width: 100%;
		height: 120px;
		background: pink;
		}
	}
</style>

页面效果

进阶用法

具名插槽

如果我们想要设置多个插槽那怎么区分插槽呢？

错误示例

自定义组件代码

<template>
	<view class="body">
		<view class="header">
			<slot></slot>
		</view>
			<view class="main">
				<slot></slot>
			</view>
		<view class="footer">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
	.body {
		.header {
			width: 100%;
			height: 100px;
			background: gray;
		}

		.main {
			width: 100%;
			min-height: 150px;
		}

		.footer {
			width: 100%;
			height: 100px;
			background: darkgray;
		}
	}
</style>

页面代码

<template>
	<view class="box">
		<template-body>
			<view class="main_box">插槽插入样式</view>
		</template-body>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.box{
		.main_box{
		width: 100%;
		height: 120px;
		background: pink;
		}
	}
</style>

页面效果

可以看到，如果这样写的话，是无法区分，到底要插入到哪个槽

正确示例

我们为插槽设定一个名字，称为具名插槽

自定义组件代码

<template>
	<view class="body">
		<view class="header">
			<slot name="header">header头部区域</slot>
		</view>
			<view class="main">
				<slot name="main">main主体区域</slot>
			</view>
		<view class="footer">
			<slot name="footer">footer尾部区域</slot>
		</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
	.body {
		.header {
			width: 100%;
			height: 100px;
			background: gray;
		}

		.main {
			width: 100%;
			min-height: 150px;
		}

		.footer {
			width: 100%;
			height: 100px;
			background: darkgray;
		}
	}
</style>

页面上的代码

<template>
	<view class="box">
		<template-body>
			<template v-slot:main>
				<view class="main_box">插入的主体模板内容</view>
			</template>
		</template-body>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.box{
		.main_box{
		width: 100%;
		height: 120px;
		background: pink;
		}
	}
</style>

我们通过为插槽设定了一个名字，然后再页面上用template容器来添加我们要插入的模板内容，并且可以设定一些特有的样式，v-solt:main也可以简写成#main

条件插槽

如果我们写了一个自定义组件中包含了很多东西的话，我在页面上使用这个组件的时候不想全部都要，怎么办呢？这个时候我们就要用我们的条件插槽了，用v-if来判断存在就出现，不存在就不出现

使用用法

自定义组件代码

<template>
	<view class="body">
		<view class="header" v-if="$slots.header">
			<slot name="header">header头部区域</slot>
		</view>
			<view class="main" v-if="$slots.main">
				<slot name="main">main主体区域</slot>
			</view>
		<view class="footer" v-if="$slots.footer">
			<slot name="footer">footer尾部区域</slot>
		</view>
	</view>
</template>

当我们再页面上使用了这个自定义组件，但是没有为其指定名字的页面效果

<template>
	<view class="box">
		<template-body>
			<view class="main_box">这是我们的主体条件插槽区域</view>
		</template-body>
	</view>
</template>

 

可以看到，我们的页面上虽然使用了这个自定义组件，但是没有为其指定名字，所以什么都没有出现

指定自定义组件名字

<template>
	<view class="box">
		<template-body #main>
			<view class="main_box">这是我们的主体条件插槽区域</view>
		</template-body>
	</view>
</template>

页面效果