在小程序开发过程中，自定义组件是提升代码复用性和开发效率的重要工具。而插槽作为自定义组件的关键特性之一，能够让组件更加灵活多变。本文将带你深入了解小程序自定义组件中插槽的相关知识，通过理论讲解与代码示例相结合的方式，帮助你全面掌握插槽的使用技巧。
一、什么是插槽
在小程序自定义组件的 WXML 结构中，我们可以添加一个<slot>节点，这个节点就是插槽。简单来说，插槽就像是一个占位符，用于承载组件使用者提供的 WXML 结构。
假设我们封装了一个自定义组件A，在组件内部某些节点的内容，作为组件封装者的我们可能事先并不清楚，这时就可以用插槽来占位。当外界使用这个组件时，就能够向插槽中填充具体的内容。
例如，在页面上使用组件A两次，第一次向插槽里填充一个<view>组件，第二次填充一个<text>组件，最终展示时，插槽位置就会分别显示<view>和<text>组件。这就体现了插槽允许封装者占位，让使用者填充具体内容节点的作用。
二、单个插槽的使用
（一）使用规则
在小程序中，默认每个自定义组件只允许使用一个<slot>来进行占位，这种情况就叫做单个插槽。
在组件封装时，在组件的 UI 结构中通过<slot>进行占位，对于不确定的内容，用它来代替。而在使用组件时，由使用者决定向这个占位符中填充什么样的节点。
（二）代码示例
创建并注册组件
在components目录下新建一个文件夹test，然后在test目录下新建一个组件test4。接着打开app.json文件，将test4注册为全局组件，代码如下：
{
"usingComponents": {
"test4": "/components/test/test4"
}
}
组件内部结构
打开test4组件的wxml文件，编写如下代码：
<view> <view>这里是组件的内部结构</view> <slot></slot> </view>
此时，组件内部有一个固定的<view>显示文本 “这里是组件的内部结构”，还有一个<slot>占位符。
使用组件并填充插槽
在home页面的wxml文件中使用test4组件，并向插槽填充内容，代码如下：
<test4> <view>这是通过插槽填充的内容</view> </test4>
保存代码后，在页面上就会显示出组件内部固定的<view>以及通过插槽填充的<view>。
三、启用多个插槽
（一）启用方法
小程序自定义组件默认不支持使用多个插槽，如果需要使用多个<slot>插槽，我们可以在组件的js文件中通过配置来启用。
具体做法是在组件的js文件中声明一个options节点，在options内部设置multipleSlots: true。
（二）代码示例
以test4组件为例，打开test4.js文件，添加如下代码：
Component({
options: {
multipleSlots: true
},
data: {},
properties: {}
})
这样就启用了多个插槽，接下来就可以在组件中定义多个插槽了。
四、定义和使用多个插槽
（一）定义规则
在组件的wxml结构中，使用多个<slot>标签进行占位，并通过不同的name属性来区分不同的插槽。
例如，定义两个插槽，一个name为before，另一个name为after：
<slot name="before"></slot> <view>这里是组件的中间部分</view> <slot name="after"></slot>
（二）使用方法
在使用组件时，为了向不同的插槽插入内容，需要给要插入的节点添加slot属性，并指定要填充的插槽名字。
（三）代码示例
组件定义多个插槽
在test4组件的wxml文件中定义多个插槽，代码如下：
<slot name="before"></slot> <view>这里是组件的中间部分</view> <slot name="after"></slot>
使用组件并填充不同插槽
在home页面的wxml文件中使用test4组件，并向不同插槽填充内容，代码如下：
<test4> <view slot="before">这是填充到before插槽的内容</view> <view slot="after">这是填充到after插槽的内容</view> </test4>
保存代码后，页面上就会按照我们的设置，在相应位置显示不同插槽填充的内容。
通过以上对插槽的全面介绍，你对小程序自定义组件中的插槽应该有了更深入的理解和掌握。无论是单个插槽还是多个插槽的使用，都能让你的组件更加灵活，适应不同的业务需求。在实际开发中，合理运用插槽，能够有效提高代码的复用性和可维护性，提升开发效率。希望你在今后的小程序开发中，能够熟练运用插槽技术，打造出更加优秀的小程序应用。
原文链接：https://blog.csdn.net/m0_57836225/article/details/145383673