小程序插槽使用

 

1.介紹：我們封裝組件的時候，內容有時候是不確定的，因為內容是由調用者傳入的，所有需要插槽來接受父組件的內容

<!-- 在組件的wxml中定義插槽 -->

<view>

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

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

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

</view>



<!-- 在頁面組件中使用 -->


<dong my-class="add">

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

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

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

</dong>

 

// 還需要在組件中的index.js紅配置multipleSlots支持使用多個插槽，默認只能支持使用一個

Component({


    options: {

        multipleSlots: true
    }
})