32. 插槽

2023-09-19 11:52:23发布
23

小程序的插槽和vue的插槽几乎一样

例子(my-test是一个自定义组件)

<view>
  <my-test>
    <view slot="before">before</view>
    <view>no name</view>
    <view slot="after">after</view>
  </my-test>
</view>

my-test组件代码

<view>
  <slot name="before"></slot>
  <slot></slot>
  <view>这是mytest组件的内容</view>
  <slot name="after"></slot>
</view>

my-test组件的js

Component({
  options: {
    multipleSlots: true // 重要!!!如果不开启这个,插槽的位置顺序不会按我们的规定来摆放
  }
})