uni-app插槽

什么是插槽?

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

基本概念

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

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

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

---

默认插槽

<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>