小程序中自定义组件的插槽

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」

什么是插槽

在自定义组件的 wxml 结构中，可以提供一个 <slot> 节点（插槽），用于承载组件使用者提供的 wxml 结构

单个插槽

单个插槽的定义

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

• 封装组件的页面结构

  <view>
    <view>这里是组件的内部结构</view>
    <!-- 对于不确定的内容，可以使用<slot>进行占位，具体的内容由组件的使用者决定 -->
    <slot></slot>
  </view>
  

单个插槽的使用

• 使用组件的页面结构

  <my-test4>
    <!-- 这部分内容将被放置在组件<slot> 的位置上 -->
    <view>这是提供插槽填充的内容</view>
  </my-test4>
  

• 示例效果

  

多个插槽

多个插槽的启用

在小程序的自定义组件中，需要使用多个 <slot>插槽时，可以在组件的 .js 文件中，通过如下方式进行启用

Component({

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

多个插槽的定义

• 在自定义组件的 wxml 结构中使用多个 <slot> 节点，以不同的 name 来区分不同插槽

• 封装组件的页面结构

  <view>
    <view>这里是组件的内部结构</view>
    <slot name="first"></slot>
    <slot name="second"></slot>
  </view>
  

多个插槽的使用

• 在使用带有多个插槽的自定义组件时，需要用 slot 属性来将节点插入到不同的 <slot> 中

• 使用组件的页面结构

  <my-test4>
    <!-- 这部分内容将被放置在组件<slot> 的位置上 -->
    <view slot="first">这是提供插槽填充的内容_first</view>
    <view slot="second">这是提供插槽填充的内容_sencod</view>
  </my-test4>
  

• 示例效果