微信小程序打夯之旅(七):组件支持多个内容槽(slot)

430 阅读1分钟

组件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 中设置 mutipleSlotstrue

  • 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({})