微信小程序 组件插槽

效果展示

组件引用

index/index.json

"usingComponents": {
    "single": "../single/index",
    "multiple": "../multiple/index"
}

层级关系

index/index.wxml

<single>
  <span style="color: red;">
    默认
  </span>
</single>
<!--...-->
<multiple>
  <span slot="before" style="color: blue;">
    之前
  </span>
  <span style="color: red;">
    默认
  </span>
  <span slot="after" style="color: green;">
    之后
  </span>
</multiple>

单个插槽

single/index.wxml

这是一个单个插槽组件
<slot></slot>

多个插槽

multiple/index.wxml

<slot name="before"></slot>
这是一个多个插槽组件
<slot></slot>
<slot name="after"></slot>

🀄🎲 重点

multiple/index.js

Component({
  options: {
    /** 启用多slot支持 */
    multipleSlots: true
  }
})

参考文档

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#组件wxml的slot