微信小程序的自定义组件插槽

一 什么是插槽

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

二 单个插槽

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

  这里是组件的内部结构

 

  

   

    这是通过插槽填充的内容

三 启用多个插槽

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

示例代码如下。

Component({

  options: {

    multipleSlots: true // 在组件定义时的选项中启用多个 slot 支持

  }

})

四 定义多个插槽

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

 

  

  这里是组件的内部结构

 

  

五 使用多个插槽

在使用带有多个插槽的自定义组件时，需要用 slot 属性来将节点插入到不同的 中。示例代码如下。

  这是插入到组件 slot name="before"中的内容

  这是插入到组件 slot name="after"中的内容