【愚公系列】《微信小程序开发解析》012-小程序自定义组件

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

---

🚀前言

随着移动互联网的快速发展，小程序作为一种轻量级的应用形式，受到了越来越多开发者和企业的青睐。小程序不仅能够提供便捷的用户体验，还能有效降低开发和维护成本。为了提升小程序的复用性和可维护性，自定义组件成为了开发中不可或缺的一部分。

在这篇文章中，我们将深入探讨小程序自定义组件的概念、优势以及实际应用。我们将介绍如何创建、使用和管理自定义组件，帮助开发者掌握其核心思想和实践技巧。通过实例讲解，您将能够更好地理解自定义组件在小程序开发中的重要性，并在实际项目中灵活运用。

无论您是小程序开发的新手还是有经验的开发者，这篇文章都将为您提供有价值的参考和启发。让我们一起探索小程序自定义组件的世界，提升我们的开发效率和用户体验！

🚀一、小程序自定义组件

🔎1.创建自定义组件

在微信小程序开发中，自定义组件（Custom Component）是用于封装页面中的可复用小块，并且可以通过参数和方法进行交互的技术。

🦋1.1 自定义组件参数（Properties）

自定义组件的参数（或称属性，properties）是由外部传入组件的数据。可以在组件的定义文件（component.json 或 component.js）中进行定义。

☀️1.1.1 定义属性

在组件的 component.js 文件中，使用 properties 定义属性：

Component({
   
  properties: {
   
    // 属性值可以是简单类型（如 String, Number, Boolean）或对象
    title: {
   
      type: String,
      value: '默认标题'
    },
    count: {
   
      type: Number,
      value: 0
    }
  },
  data: {
   
    // 组件内部数据
  },
  methods: {
   
    // 组件方法
  }
});

🦋1.2 自定义组件方法（Methods）

自定义组件的方法是组件内部可以调用的函数，包括事件处理函数和其他辅助函数。

☀️1.2.1 定义方法

在组件的 component.js 文件中，使用 methods 定义方法：

Component({
   
  properties: {
   
    title: String,
    count: Number
  },
  data: {
   
    // 组件内部数据
  },
  methods: {
   
    // 自定义方法
    incrementCount() {
   
      this.setData({
   
        count: this.data.count + 1
      });
    },
    // 事件处理方法
    handleTap() {
   
      this.triggerEvent('customEvent', {
    count: this.data.count });
    }
  }
});

🦋1.3 案例：计数器组件

☀️1.3.1 创建组件文件

创建一个名为 counter 的组件，包含 counter.js, counter.wxml, counter.wxss, 和 counter.json 文件。

counter.js

Component({
   
  properties: {
   
    count: {
   
      type: Number,
      value: 0
    }
  },
  data: {
   
  },