微信小程序打夯之旅(七)：組件支持多個內容槽(slot)

組件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({})
複製代碼