概述

微信小程序组件通过使用slot标签，可以让使用这个组件的页面向slot标签按需插入一些内容，情况可分为使用单个slot和多个slot，本博客的代码是在微信小程序自定义组件 | LeDao’s Blog (zoutl.cn)的基础上进行修改

代码实现

单个slot

直接在组件的wxml文件里加上一个slot标签

1
2
3
4
<!--components/input/input.wxml-->
<text style="color: red;font-size: 18px;">自定义组件</text>
<input type="text" style="border: 2px solid red;" value="{{inputValue}}"/>
<slot></slot>

使用组件时，只需要在组件标签内加上要插入的内容

1
2
3
4
5
6
<!--pages/demo/demo.wxml-->
<view>
    <my-input input-value="777">
        <text style="color: green;font-weight: bold;">我是通过slot标签插入组件的内容</text>
    </my-input>
</view>

效果如下图所示，绿色文本是插入的

image-20221205150649283

多个slot

需要使用多slot时，可以在组件js中声明启用，在组件定义时的选项中启用多slot支持

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
// components/input/input.js
Component({

    options: {
        multipleSlots: true //开启多slot支持
    },

    /**
     * 组件的属性列表
     */
    properties: {
        inputValue: {
            type: Number,
            value: 666
        }
    },

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

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

组件的slot标签需要加上一个name属性，这样在使用组件时就可以根据name的值准确插入内容了，组件页面代码如下

1
2
3
4
5
6
7
<!--components/input/input.wxml-->
<slot name="before"></slot>
<view>
    <text style="color: red;font-size: 18px;">自定义组件</text>
    <input type="text" style="border: 2px solid red;" value="{{inputValue}}" />
</view>
<slot name="after"></slot>

使用组件时，通过slot属性将内容插入组件额不同slot标签中

1
2
3
4
5
6
7
<!--pages/demo/demo.wxml-->
<view>
    <my-input input-value="777">
        <text slot="before" style="color: green;font-weight: bold;">前面</text>
        <text slot="after" style="color: green;font-weight: bold;">后面</text>
    </my-input>
</view>

效果如下图所示，绿色文本是插入的

image-20221205152023368