WeChat applet custom component slot slot

The slot in the custom component, as the name suggests, is a placeholder stored in the component, and the specific content is specified by the user of the component

The slot slot is divided into

• single slot
• multiple slots

How to use a single slot:

Define the slot in the component's wxml page

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

Fill the slot with data in the page where the component is used, where my-test5 is the name of the component.

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

How to use multiple slots

In the WeChat applet, there can only be one slot by default. If you want to use multiple slots in the component, you need to define multipleSlots as true in the .js file of the component

Component({
  options:{
    multipleSlots:true
  }
}

Multiple slots use different name attributes to distinguish

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

Use the slot in the page and mark it through the slot attribute

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