組件A支持單個內容槽

• a.json

{
  "component": true
}

• a.wxml

<view class="inner">
  <slot></slot>
</view>

• a.js

Component({})

在B中使用組件A

• b.json

{
  "usingComponents": {
    "component-a": "../components/a"
  }
}

• b.wxml

<view>
  <component-a>
    單個內容槽內容
  </component-a>
</view>

• b.js

Page({})

組件C支持多個內容槽

需要在 options 中設置 mutipleSlots 為 true

• c.json

{
  "component": true
}

• c.wxml

<view class="inner">
  <slot name="before"></slot>
  <view>這里是組件的內部細節</view>
  <slot name="after"></slot>
</view>

• c.js

Component({
  options: {
    mutipleSlots: true
  }
})

在D中使用組件C

• d.json

{
  "usingComponents": {
    "component-c": "../components/c"
  }
}

• d.wxml

<view>
  <component-c>
    <view slot="before">這里是插入到組件slot name="before"中的內容</view>
    <view slot="after">這里是插入到組件slot name="after"中的內容</view>
  </component-c>
</view>

• d.js

Page({})