WeChat applet slot does not display

Problem: Create a component and use a slot with a name. When the page calls the component using the slot, it is not displayed.

Source code:

componentxml

<view class="p-item br24" style="{
   
   {style}}">
    <slot name="right" wx:if="{
   
   {!custBottom}}"></slot>
    <view class="right-bottom" wx:else>
      <view class="flex_row_st numchange">
        <text class="minus">-</text>
        <input type="number" class="num-input" value="100"></input>
        <text class="add">+</text>
      </view>
      <button size="mini" class="primary-color btn" bindtap="DoSignOK">添加</button>
    </view>
  </view>
</view>

JS: Determine whether to use slot based on conditions

Component({
  properties: {
    custBottom: {type: Boolean, value: false}
  },
 
  data: {},
  lifetimes: {
    attached() {
      console.log(">>> 被页面调用", this.data)
    }
  },
  methods: {
  }
});

 Page call

 <view>
    <productCard custBottom="{
   
   {true}}">
      <view slot="right">TEST</view>
    </productCard>

    <productCard></productCard>

  </view>

solve:

Add multi-slot configuration to the component and set it to true

options: {
  multipleSlots: true
},

 Revise:

Component({
  properties: {
    custBottom: {type: Boolean, value: false}
  },
options: {
  multipleSlots: true //增加此配置slot
},
 
  data: {},
  lifetimes: {
    attached() {
      console.log(">>> 被页面调用", this.data)
    }
  },
  methods: {
  }
});

Effect: The slot comes out.