微信小程序打夯之旅(七)：组件支持多个内容槽(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({})
复制代码