vue自定义组件-插槽

1.单插槽

创建组件mycomponent，其中head、body与footer给不同的颜色便于观察

给header盒子中添加插槽标签<slot></slot>

<template>
	<view class="">
		<view class="header_box">
			<text>head盒子：</text>
			<slot></slot>
		</view>
		<view class="body_box">	<text>body盒子：</text></view>
		<view class="footer_box"><text>footer盒子：</text></view>
	</view>
</template>

在页面中使用组件后，可以自定添加内容，添加的东西都会在head盒子中

<template>
	<view class="layout">
		<mycomponent>
			在组件中自定义插槽的内容
		</mycomponent>
	</view>
</template>

2.多插槽

如果需要多个插槽，那就给插槽命名就好了

组件：

<template>
	<view class="container">
		<view class="left">
			{{title}}
		</view>
		<view class="middle">
			<slot name="middle"></slot>
		</view>
		<view class="right">	
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		title:{
			type:String,
			default:'标题'
		}
	})
</script>

页面使用：

<template>
	<view class="layout">
		<mycomponent title="热门商品">
			<template #middle>中间演示一下</template>
			<template #right>更多商品</template>
		</mycomponent>
		
		<mycomponent title="最新活动">
			<template #middle>中间不写东西，单纯演示</template>
			<template #right>更多活动</template>
		</mycomponent>
	</view>
</template>