小程序-自定义组件-插槽

自定义组件-插槽

1.什么是插槽

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

2.单个插槽

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

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


<component-tag-name>
	<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
	<view>这里是插入到组件slot中的内容</view>
</component-tag-name>

3.启用多个插槽

在小程序的自定义组件中，需要使用多<slot>插槽时，可以在组件的.js文件中，通过如下方式进行启用。

示例代码如下：

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

4.定义多个插槽

可以在组件的.wxml中使用多个<slot>标签，以不同的name来区分不同的插槽。示例代码如下：

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

5.使用多个插槽

在使用带有多个插槽的自定义组件时，需要用slot属性来将节点插入到不同的<slot>中。示例代码如下：

<!-- 引用组件的页面模板 -->
<component-tag-name>
  <!-- 这部分内容将被放置在组件 <slot name="before">的位置上 -->
  <view slot="before">这里是插入到组件slot name="before"</view>
  <!-- 这部分内容将被放置在组件 <slot name="after">的位置上 -->
  <view slot="after">这里是插入到组件slot name="after"</view>
</component-tag-name>