微信小程序组件模板的使用

最新推荐文章于 2025-07-25 08:00:00 发布

原创最新推荐文章于 2025-07-25 08:00:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序组件使用

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

41 篇文章

订阅专栏

本文介绍了一种在组件中使用多槽位(slot)的技术实现方案。通过组件内部定义多个槽位并在外部页面填充内容的方式，实现了组件内容的灵活配置。文章详细展示了组件模板与页面模板之间的交互方式及多槽位的支持配置。

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

组件部分

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件模板自身的内容</view>
  <slot name="name1"></slot>
  <slot name="name2"></slot>
</view>

//js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

页面部分

<!-- 引用组件的页面模版 -->
<view>
  <my-component>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view slot="name1">内容1</view> 
     <view slot="name2">内容2</view> 
  </my-component>
</view>