微信小程序 slot 插槽使用

最新推荐文章于 2025-06-23 10:05:10 发布

原创最新推荐文章于 2025-06-23 10:05:10 发布 · 1.7w 阅读

14 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了小程序中组件的插槽(slot)使用方法，包括单个插槽和多个插槽的示例代码，展示了如何通过插槽实现组件的标准化与定制化内容的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

1、单个slot，代码示例：

<!--第一步：封装组件，components/music/index.wxml-->
<!--components/music/index.wxml-->
<view>
  <text>我是标准的</text>
  <!--下面是slot插槽（占位），用于承载组件引用时提供的子节点-->
  <slot></slot>
</view>

<!--第二步：引入组件，pages/index/index.wxml-->
<f-music></f-music>
<f-music>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view>我是定制的内容</view>
</f-music>

运行结果

2、多个slot，代码示例：

<!--第一步：封装组件，components/music/index.wxml-->
<view>
 <text>我是标准的</text>
 <!--下面是slot插槽（占位），用于承载组件引用时提供的子节点-->
 <slot name="custom1"></slot>
 <slot name="custom2"></slot>
</view>

// 第二步：启用插槽，components/music/index.js
Component({
  // 启用插槽
  options: {
    multipleSlots: true
  }
})

<!--第三步：引用组件，pages/index/index.wxml-->
<f-music>
<view slot="custom2">我是定制的内容2</view>
</f-music>
<f-music>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view slot="custom1">我是定制的内容1</view>
  <view slot="custom2">我是定制的内容2</view>
</f-music>

运行结果