微信小程序自定义组件Component的使用（附源码）

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

刺心疯

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

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_42363090/article/details/94649683

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

121 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

本文详细讲解了微信小程序中自定义组件Component的创建和使用。首先介绍了在components文件夹下创建组件，包括home-item组件的js、json、wxml和wxss文件。接着展示了如何在父组件的json文件中引入子组件，并在wxml中调用。此外，还讨论了父子组件之间的事件传递，通过在子组件中触发事件，父组件进行事件绑定和响应。最后提到了数据绑定和组件属性的使用，指出组件引入只需在父组件文件中声明。

1.创建component组件
在这里插入图片描述
首先如上图创建components文件夹，home-item就是最上面效果图的条目的组件模块。这里可以发现，和普通页面一样，组件也可以创建四个文件。在js文件中可以进行数据的绑定与父组件的交互。

home-item.json

{
  "component": true, 
  "usingComponents": {}  //可以使用其他组件
}

home-item.js

//(Component构造器)
Component({
  //一些组件选项
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

  //组件的对外属性，属性设置中可包含三个字段,type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数    
  properties: {
    // 活动封面
    coverUrl: {
      type: String,
      value: "http://img.youpenglai.cn/meetingpic/0b24376c43b1c372076aa65253b2f0ca123.jpg"
    },

    // 活动标题
    activi