小程序——组件插槽slot

slot的使用：<slot></slot>
官网文档
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
单卡槽的时候：

<!-- 组件模板 -->
<view class="segmentContainer">
  <segmentPane id="sp_sb_id" segmentItems="{{segmentItems}}" bind:selectChange="handerSelectChange" />
  <swiper class="segmentpane" circular bindchange="handerChange" current="{{currentPaneId}}" >
  </swiper>
  <slot></slot>
</view>

<!-- 引用组件的页面模板-->
<segmentPane segmentItems="{{segmentItem}}">
<view>这是插入到组件slot的内容</view>
</segmentPane>

多卡槽的时候：
1、在组件模板的js文件中，配置多slot支持

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {/* ... */},
  data: {/* ... */},
  methods: {/* ... */}
  })

2、每个slot绑定name

<view class="segmentContainer">
  <slot name="before"></slot>
  <segmentPane id="sp_sb_id" segmentItems="{{segmentItems}}" bind:selectChange="handerSelectChange" />
  <swiper class="segmentpane" circular bindchange="handerChange" current="{{currentPaneId}}" >
  </swiper>
  <slot name="after"></slot>
</view>

3、使用组件时，用slot属性来讲内容插入到相应的slot上

<segmentPane segmentItems="{{segmentItem}}">
<view slot="before">这是插入到组件slot name="before"的内容</view>、
<view slot="after">这是插入到组件slot name="after"的内容</view>
</segmentPane>