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



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

<!-- 组件的封装者 -->

<view>

  <view>这里是组件的内部结构</view>

  <!-- 对于不确定的内容，可以使用<slot> 进行占位，具体的内容由组件的使用者决定-->

  <slot></slot>

</view>

<my-test4>

    <!-- 这部分内容将被放置为组件 <slot> 的位置上 -->

    <view>这是通过插槽填充的内容</view>

</my-test4>

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

示例代码如下。

Component({

  options: {

    multipleSlots: true // 在组件定义时的选项中启用多个 slot 支持

  }

})

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

<view>

  <!-- name 为 before 的第一个 slot 插槽-->

  <slot name="before"></slot>

  <view>这里是组件的内部结构</view>

  <!-- name 为 after 的第二个 slot 插槽-->

  <slot name="after"></slot>

</view>

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

<my-test4>

  <view slot="before">这是插入到组件 slot name="before"中的内容</view>

  <view slot="after">这是插入到组件 slot name="after"中的内容</view>

</my-test4>