小程序自定义组件之插槽

1. 什么是插槽

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

2. 单个插槽

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

2. 多个插槽

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

Components({
	options: {
    	multipleSlots: true
  },
  properties:{},
  methods:{}
})

3. 定义多个插槽

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

//组件模板
<view>
  <slot name="before"></slot>
  <view>这里是组件的内部结构</view>
  <slot name="after"></slot>
</view>

4. 使用多个插槽

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

//引用组件的页面模板
<my-test4(定义的组件名称)>
	//这部分将被放在组件<slot name="after">的位置上
  <view slot="after">这是通过插槽填充的内容1</view>
  //这部分将被放在组件<slot name="before">的位置上
  <view slot="before">这是通过插槽填充的内容2</view>
</my-test4>