微信小程序 自定义组件 插槽slot

自定义组件中插槽slot，顾名思义，就是在组件中存放的占位符，具体内容由组件的使用者指定

插槽slot分为

• 单个插槽
• 多个插槽

单个插槽的使用方式：

在组件的wxml页面中定义slot

<view>
  <slot></slot>
<view>

在使用组件的页面中给插槽填充数据，其中，my-test5是组件的名称。

<my-test5>
通过使用者填充的slot
</my-test5>

多个插槽的使用方式

在微信小程序中，插槽slot默认只能有一个，如果希望组件中使用多个插槽，需要在组件的.js文件中定义multipleSlots为true

Component({
  options:{
    multipleSlots:true
  }
}

多个slot使用不同的name属性进行区分

<view>
  <slot name="before"></slot>
  <view>
  组件本身
</view>
  <slot name="after"></slot>
</view>

在页面中使用slot，通过slot属性进行标注

<my-test5>
<view slot="before">
通过使用者填充的slot
</view>
<view slot="after">
通过使用者填充的slot
</view>
</my-test5>