小程序 slot插槽

2021-03-15  本文已影响0人  晓函

组件wxml的slot

在组件的wxml中可以包含 slot 节点,用于承载组件使用者提供的wxml结构。
默认情况下,一个组件的wxml中只能有一个slot。需要使用多slot时,可以在组件js中声明启用

<view>  
  <my-components>
 
      <!-- 匿名插槽 父级里直接写内容 -->
      <view>我是匿名插槽内容</view>
      
      <!-- 我是个有名字的插槽 -->
      <view slot="myslot">我是个有名字的插槽</view>
  
  </my-components>
</view>

需要使用多slot时,可以在组件js中声明启用

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
})

具名插槽
此时,可以在这个组件的wxml中使用多个slot,以不同的 name 来区分。

<view>

  <!-- 匿名插槽 在子组件 控制其显示位置-->
  <slot></slot>
  
  <!-- 有名插槽 定义的有名称这里调用也得有名称 同时开启multipleSlots为true -->
  <slot name="myslot"></slot>

</view>

上一篇 下一篇

猜你喜欢

热点阅读