问题:创建组件,使用带名字的slot,页面调用组件使用slot不显示
源码:
组件xml
<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:根据条件判断是否使用slot
Component({
properties: {
custBottom: {type: Boolean, value: false}
},
data: {},
lifetimes: {
attached() {
console.log(">>> 被页面调用", this.data)
}
},
methods: {
}
});
页面调用
<view>
<productCard custBottom="{{true}}">
<view slot="right">TEST</view>
</productCard>
<productCard></productCard>
</view>
解决:
组件加上多slot配置,置为true
options: { multipleSlots: true },
修改:
Component({
properties: {
custBottom: {type: Boolean, value: false}
},
options: {
multipleSlots: true //增加此配置slot
},
data: {},
lifetimes: {
attached() {
console.log(">>> 被页面调用", this.data)
}
},
methods: {
}
});
效果:slot出来了。