
源码:
组件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出来了。
