【微信小程序】自定义组件 - 插槽

1. 什么是插槽

2. 单个插槽

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

3. 启用多个插槽

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

// components/study-slot/study-slot.js
Component({
  options:{
    multipleSlots:true
  },
  
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4. 定义多个插槽

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

4. 使用多个插槽

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