Slot使用

是用slort和不使用的区别

接自定义View2内容
在自定义tabs.wxml中，使用标签

<view class="container">
    <view class="tab-panel">
<!--        内容不确定-->
<!--        样式不确定-->
<!--        使用插槽 slot-->
        <slot></slot>
    </view>
</view>

在index.wxml中引用自定义tabs.wxml

<view class="container">
    <view>使用了插槽</view>
    <i-tabs>
        <button>我是插槽</button>
    </i-tabs>
</view>

UI显示结果会将自定义tabs中的Button按钮显示出来，因为使用了插槽

如果将tabs.wxml中slot注释了，index.wxml中内容不变

<view class="container">
    <view class="tab-panel">
        <!--        内容不确定-->
        <!--        样式不确定-->
        <!--        插槽 slot-->
        <!--        <slot></slot>-->
    </view>
</view>

<view class="container">
    <view>没有使用插槽</view>
    <i-tabs>
        <button>我是插槽</button>
    </i-tabs>
</view>

UI显示结果

多slot使用

1、首先需要在tabs.js中添加配置后，才可以使用多插槽

Component({
	//开启多插槽使用
    options: {
        multipleSlots: true
    },
    ......
});

2、使用多插槽

<view class="container">
    <slot name="extend"></slot>
    <view class="tab-panel">
        <!--        内容不确定-->
        <!--        样式不确定-->
        <!--        插槽 slot-->
        <slot name="panel"></slot>
    </view>
</view>

<view class="container">
    <view>使用了插槽</view>
    <i-tabs>
        <button slot="extend">我是插槽1</button>
        <view slot="panel">我是插槽2</view>
    </i-tabs>
</view>

显示的结果