给小程序组件创建slot

<!--comviewonents/juan/juan.wxml-->
<view class="model-wrapper" hidden="{{visible}}">
  <view class="mask" bindtap="setVisible"></view>
    <view class="model-content">
      <view class="delete" bindtap="setVisible">
        <i class="icon-close">X</i> 
      </view>
      <view class="title" wx:if="{{titleInfo}}">{{titleInfo}}</view>
      <slot name="reference"></slot>
      <view class="button-group" wx:if="{{leftButton || rightButton}}">
        <view class="button-item" wx:if="{{leftButton}}" bindtap="left_button_click">{{leftButton}}
        </view>
        <view class="button-item black" wx:if="{{rightButton}}" bindtap="right_button_click">{{rightButton}}
        </view>
    </view>
  </view>
</view>

// components/juan/juan.js
Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    titleInfo:{
      type:String,
      value:'ddd'
    },
    leftButton:{
      type:String,
      value:'取消'
    },
    rightButton:{
      type:String,
      value:'确认'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    visible:false,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    setVisible(){
      this.setData({
        visible:true,
      })
    },
    left_button_click(){

    },
    right_button_click(){

    }
  }
})

页面中引用组件：

<!--pages/juan/juan.wxml-->
<juan id="juan">
  <view class="f-coupon-wrapper" slot="reference">
    <view class="coupon-content-wrapper">
       <image src="../../image/log.png" width="100%" alt="优惠券"></image> 
    </view>
  </view>
</juan>

 但是需要注意的是，小程序slot渲染后的位置和slot处于wxml中的位置不一致。官方仍未解决

转载于:https://www.cnblogs.com/rachelch/p/9105687.html