微信小程序_17,插槽

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

什么是插槽:

在自定义组件的WXML结构中,可以提供一个节点(插槽),用于承载组件使用者提供的WXML结构

单个插槽:

在小程序1中,默认每个自定义组件中只允许使用一个进行占位,这种个数上的限制叫做单个插槽

被引用到的组件,这里是使用slot进行占位:

<view>
  <view>
    这里是组件的内部结构
  </view>
  <slot></slot>
</view>

引用组件,这里引用组件的内部代码会被填充到被引用组件的slot标签位置:

<!--index.wxml-->
<view>
  这里是index页面
</view>

<myTest1>
  <view>
    这是通过插槽填充的内容
  </view>
</myTest1>

run:

启用多个插槽:

在小程序的自定义组件中,需要使用多插槽时,可以在组件的.js文件中,通过如下方式启用: 示例代码如下:

// components/myTest1/myTest1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

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

定义多个插槽:

可以在组件的.wxml中使用多个标签,以不同的name来区分不同的插槽,示例代码如下:

<view>
  <view>
    这里是组件的内部结构
  </view>
  <!-- 组件的第一个插槽 -->
  <slot name="before"> </slot>
  <view>
    这是一段固定的文本内容
  </view>
  <!-- 这是第二个插槽 -->
  <slot name="after"></slot>
</view>

多插槽的使用:

<myTest1>
  <view slot="before">
    这是通过插槽填充的内容
  </view>
  <view slot="after">
    这是通过插槽填充的内容
  </view>
</myTest1>

run: