小程序slot插槽的使用

小程序slot插槽的使用

1、

<!-- 在组件的wxml中定义插槽 -->

<view>

    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽 -->
    <slot name="before"></slot>

    <slot name="after"></slot>

</view>

2、

<!-- 在页面组件中使用 -->


<myComponent my-class="add">

  <text>默认的插槽</text>

  <view slot="after">具名插槽</view>

  <view slot="before">具名插槽</view>  

</myComponent>

3、

// 还需要在组件中的index.js红配置multipleSlots支持使用多个插槽，默认只能支持使用一个

Component({


    options: {

        multipleSlots: true
    }
})