微信小程序打夯之旅(七)：组件支持多个内容槽(slot) [ 复制粘贴工程师 ]

组件A支持单个内容槽

a.json

1
2
3

{
  "component": true
}

a.wxml

1
2
3

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

a.js

1	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

1
2
3

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