小程序插槽

插槽

在自定义组件的wxml结构中，可以提供一个<slot>节点插槽，用于承载组件使用者提供的wxml结构

单个插槽

在小程序中，默认每个自定义组件中只允许使用一个<slot>进行占位，这种个数上的限制叫做单个插槽

<!-- 组件的封装 -->
<view>
	<view>这里是组件的内部节点</view>
	<!-- 对于不确定的内容，可以使用 <slot> 进行占位，具体的内容由组件的使用者决定  -->
	<slot></slot>
</view>

<!-- 组件的使用 -->
<component-tag-name>
	<!-- 这部分内容将被放置在组件 <slot> 的位置上  -->
	<view>这里是组件的内部节点</view>
</component-tag-name>

多个插槽

在小程序的自定义组件中，需要使用多<slot>插槽时，可以在组件的.js文件中进行启动

Component({
	options: {
		multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
	},
	properties: { ... },
	methods: { ... }
})

定义多个插槽

因为要使用多个插槽，所以在定义时要以不用的name来区分不同的插槽

<!-- 组件模板 -->
<view class="wrapper">
	<!-- name 为 before 的第一个 slot 插槽 -->
	<slot name="before"></slot>
	<view>这是一段固定的文本内容</view>
	<!-- name 为 after 的第二个 slot 插槽 -->
	<slot name="after"></slot>
</view>