uniapp插槽用法

小汤猿人类

已于 2024-08-30 17:26:21 修改

阅读量410

点赞数 11

文章标签： uni-app 前端 linux

于 2024-08-28 23:40:29 首次发布

本文链接：https://blog.csdn.net/a1241436267/article/details/141652225

版权

目录

什么是插槽?

基本概念

默认插槽

命名插槽

作用域插槽

场景一:子插槽向父组件传递一个字符串

场景二:子插槽向父组件传递对象

什么是插槽?

在 UniApp 中，插槽（Slot）是一种允许父组件向子组件特定位置插入HTML内容的方式。这种方式使得组件更加灵活，可以被复用在多种场景下，同时让父组件能够控制子组件的部分呈现内容。

基本概念

默认插槽：当没有特别指定插槽名称时，默认插槽就是指没有名字的插槽，可以在子组件中直接使用 <slot></slot> 标签来定义一个默认插槽的位置。

命名插槽：如果需要在子组件中定义多个插槽，可以通过 <slot name="slotName"></slot> 来定义具有特定名称的插槽。父组件则需要使用 <template v-slot:slotName>...</template> 或者更简洁的 <template #slotName>...</template> 来填充这些具名插槽。

作用域插槽：有时候父组件需要访问子组件的数据或属性，这时候就需要使用作用域插槽。子组件需要在 <slot> 标签中声明需要传递给父组件的数据，如 <slot name="slotName" :items="items"></slot>。父组件在使用这个插槽时，可以通过 v-slot:slotName="{ items }" 来接收这些数据，并根据这些数据进行渲染。

默认插槽

子插槽:<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

<template>
	<view class="all">
		<view class="header">
			头部
		</view>
		<view class="main">
			<slot></slot>
		</view>
		<view class="footer">
			底部
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.header {
		position: sticky;
		top: 0;
		background-color: green;
		height: 100px;
		z-index: 1; // 确保头部始终在最上层
	}

	.main {
		height: 100px;
	}


	.footer {
		background-color: rosybrown;
		height: 120px;
	}
</style>

父组件:可以通过调用直接在组件内部编写代码,只适合一个插槽的场景

<template>
	<bdqn-header>
			661
	</bdqn-header>
</template>

<script setup>

</script>

<style scoped lang="scss">

</style>

命名插槽

子插槽:定义了多个插槽,会导致什么问题呢???
<template>
	<view class="all">
		<view class="header">
			<slot></slot>
		</view>
		<view class="main">
			<slot></slot>
		</view>
		<view class="footer">
			<slot></slot>
		</view>
	</view>
</template>
当出现多个插槽的时候会导致插入的时候,会在每个插槽都插入相同的数据
<template>
	<bdqn-header>
			661
	</bdqn-header>
</template>
调用插槽后会导致多个相同结构,使一个结构体重复出现多次

那么如何解决呢? 这个时候就可以用到命名插槽,在插槽标签slot中添加name属性,在调用的时候使用v-slot:名称来指定插槽插入,这样就可以避免一次性调用多个插槽,也可以简写为 #名称
<template>
	<view class="all">
		<view class="header">
			<slot name="header"></slot>
		</view>
		<view class="main">
			<slot name="main"></slot>
		</view>
		<view class="footer">
			<slot name="footerK"></slot>
		</view>
	</view>
</template>
调用子插槽的时候通过添加 v-slot:名称来指定插槽的位置
<template>
	<bdqn-header>
		<template v-slot:header>
			头部
		</template>
		<template v-slot:main>
			主体
		</template>
		<template v-slot:footerK>
			尾部
		</template>
	</bdqn-header>
</template>

<template>
	<bdqn-header>
		<template #header>
			头部
		</template>
		<template #main>
			主体
		</template>
		<template #footerK>
			尾部
		</template>
	</bdqn-header>
</template>
效果图:可以看见这样子就可以实现分别给多个插槽编写不同的实现代码

作用域插槽

作用域插槽就是可以让子插槽和父组件相互传值,相互访问

场景一:子插槽向父组件传递一个字符串

子插槽:通过name指定插槽的名称,定义一个text的变量并赋值 ( 语法变量=值 )
<template>
	<view class="all">
		<view class="header">
			   <slot name="header" text="头部:我是一个字符串"></slot>
		</view>
		<view class="main">
		 <view>
		    
		    <slot name="main" text="局部:我是一个字符串"></slot>
		  </view>
		</view>
		<view class="footer">
			底部
		</view>
	</view>
</template>
父组件:

通过 v-slot:header="{ text }" 定义了一个名为 header 的作用域插槽。
text 是从子组件传递过来的数据。
在模板中通过 {{ text }} 显示传递过来的文本。
<template>
	
	<bdqn-header>
		
		<template v-slot:header="{ text }">
			<view>{{ text }}</view>
		</template>

		
		<template v-slot:main="{ text }">
			<view>{{ text }}</view>
		</template>
	</bdqn-header>
</template>
运行效果

场景二:子插槽向父组件传递对象

子插槽:向父组件传递了一个items对象( 语法 :名称="传递的对象" )

<template>
	<view class="all">
		<!-- 头部区域 -->
		<view class="header">
			<!-- 使用插槽传递头部内容，提供默认文本 -->
			<slot name="header" text="头部:我是一个字符串"></slot>
		</view>
		<!-- 主要内容区域 -->
		<view class="main">
			<!-- 包裹一个view以便于统一管理插槽内容 -->
			<slot name="main" :items="items"></slot>
		</view>
		<!-- 底部区域，直接输出底部内容 -->
		<view class="footer">
			底部
		</view>
	</view>
</template>

<script setup>
	// 导入Vue的响应式函数ref
	import {
		ref
	} from 'vue';

	// 定义一个响应式的items数组，包含姓名和年龄信息
	var items = ref([{
		name: '张三',
		age: 18
	}, {
		name: '李四',
		age: 19
	}, {
		name: '王五',
		age: 25
	}])
</script>

<style lang="scss" scoped>
	.header {
		position: sticky;
		top: 0;
		background-color: green;
		height: 100px;
		z-index: 1; // 确保头部始终在最上层
	}

	.main {
		height: 100px;
	}


	.footer {
		background-color: rosybrown;
		height: 120px;
	}
</style>

父组件: 通过插槽接收子插槽传递的对象 ( 语法 #main="{items}" )

通过 #main 插槽展示列表项。
#main表示插槽指定的名称(name名称)
"{items}" 表示传递的对象,使用{}包裹

<template>
	<!-- 使用自定义组件bdqn-header来构建页面布局 -->
	<bdqn-header>
		<!-- 通过header插槽自定义头部内容 -->
		<template v-slot:header="{ text }">
			<view>{{ text }}</view>
		</template>

		<!-- 通过main插槽展示主体内容，通常用于列表展示 -->
		<template #main="{items}">
			<view v-for="item in items">
				{{item.name}}&nbsp;{{item.age}}
			</view>
		</template>
	</bdqn-header>
</template>

执行的结果