组件中的slot

 

        组件可以通过props来接收数据，那么如果我们需要传递一个一个模板片段给组件，我们可以使用slot。

        在组件中，slot就像一个占位符，它把组件中的一部分区域划分出来，用于接收一段模板片段。

        例如：在以下两段代码中，我们在组件中定义了一个名为id_name的slot区域。随后我们在页面中调用它，并且传入两段模板片段。

<template>
	<view>
		<image :src="props.pic"></image>
		<view>{{props.goods_name}}</view>
		<view class="id_name">
			<slot></slot>
		</view>
	</view>
</template>

<template>
	<view>
		<blog_Props pic="../../static/ai.jpg" goods_name="Picture1">
			<view> id : 123456</view>
			</blog_Props>
		<blog_Props pic="../../static/ai.jpg" goods_name="Picture1">
			<view> <button>这是一个按钮</button></view>
			</blog_Props>
	</view>
</template>

效果：

 当一个组件里有多个插槽时，我们需要给插槽命名才能保证对应的slot中展现的是我们想要的内容。

<template>
	<view>
		<image :src="props.pic"></image>
		<view>{{props.goods_name}}</view>
		<view class="id_name">
			<slot name="s1"></slot>
		</view>
		<view> 
			<slot name="b1"></slot>
		</view>
	</view>
</template>

<template>
	<view>
		<!-- <blog_Props pic="../../static/ai.jpg" goods_name="Picture1">
			<view> id : 123456</view>
			</blog_Props>
		<blog_Props pic="../../static/ai.jpg" goods_name="Picture1">
			<view> <button>这是一个按钮</button></view>
			</blog_Props> -->
			<blog_Props pic="../../static/ai.jpg" goods_name="Picture1">
				<template v-slot="s1">
					<view> id : 123456</view>
				</template>
				<template #b1>
					<view> <button>这是一个按钮</button></view>
				</template>
			</blog_Props>
	</view>
</template>

在页面中使用v-slot或者#对对应的slot进行绑定，注意这里需要使用<template></template>。效果：