🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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: {
  },
  methods: {
    increment() {
      this.setData({
        count: this.data.count + 1
      });
    },
    decrement() {
      this.setData({
        count: this.data.count - 1
      });
    },
    reset() {
      this.setData({
        count: 0
      });
    }
  }
});

counter.wxml

<view class="counter">
  <text>Count: {{count}}</text>
  <button bindtap="increment">Increment</button>
  <button bindtap="decrement">Decrement</button>
  <button bindtap="reset">Reset</button>
</view>

counter.wxss

.counter {
  text-align: center;
}
button {
  margin: 5px;
}

counter.json

{
  "component": true
}

☀️1.3.2 使用组件

在一个页面中使用该组件。假设在 index.wxml 中引用这个组件：

index.wxml

<view class="container">
  <counter count="{{initialCount}}" />
</view>

index.js

Page({
  data: {
    initialCount: 10
  },
  onLoad() {
    // 页面初始化
  }
});

index.json

{
  "usingComponents": {
    "counter": "/components/counter/counter"
  }
}

🔎2.slot插槽的使用

在微信小程序中，自定义组件是一个非常重要的功能，它允许开发者构建可重用的组件。而slot插槽则是自定义组件中用于实现内容分发的一种机制。通过插槽，开发者可以在使用自定义组件时动态地插入内容，从而提高组件的灵活性和可复用性。

🦋2.1 创建自定义组件

首先，我们创建一个名为 my-component 的自定义组件。这个组件有一个默认插槽和一个具名插槽。

☀️2.1.1 文件结构

|-- components
|   |-- my-component
|       |-- my-component.wxml
|       |-- my-component.wxss
|       |-- my-component.js
|       |-- my-component.json
|-- app.json

☀️2.1.2 my-component.wxml

<view class="my-component">
  <!-- 默认插槽 -->
  <slot></slot>
  
  <!-- 具名插槽 -->
  <view class="footer">
    <slot name="footer"></slot>
  </view>
</view>

☀️2.1.3 my-component.wxss

.my-component {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 20px 0;
}

.footer {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: 10px;
  text-align: right;
  color: #999;
}

☀️2.1.4 my-component.js

Component({
  properties: {
    // 可以在这里定义组件的属性
  }
})

☀️2.1.5 my-component.json

{
  "component": true
}

🦋2.2 使用自定义组件

☀️2.2.1 文件结构

|-- pages
|   |-- index
|       |-- index.wxml
|       |-- index.wxss
|       |-- index.js
|-- app.json

☀️2.2.2 index.wxml

<view class="container">
  <my-component>
    <view>这里是默认插槽的内容</view>
    <view slot="footer">这里是具名插槽的内容</view>
  </my-component>
</view>

☀️2.2.3 index.wxss

.container {
  padding: 20px;
}

☀️2.2.4 index.js

Page({
  data: {
    // 页面数据
  }
})

☀️2.2.5 app.json

{
  "pages": [
    "pages/index/index"
  ],
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

当我们运行这个小程序时，页面上会显示自定义组件 my-component，并且默认插槽和具名插槽的内容都被正确地渲染出来。

🔎3.父组件与子组件进行双向数据绑定和事件传递

在微信小程序中，自定义组件的事件和参数相互通信是一个非常常见的需求。通过这种方式，父组件可以与子组件进行双向数据绑定和事件传递。

🦋3.1 创建自定义组件

假设我们要创建一个名为 my-component 的自定义组件，该组件包含一个按钮，点击按钮时会触发一个自定义事件，并传递一些参数给父组件。

☀️3.1.1 组件结构

首先，在 components/my-component 目录下创建以下文件：

• my-component.js
• my-component.json
• my-component.wxml
• my-component.wxss

☀️3.1.2 组件代码

my-component.js

Component({
  properties: {
    initialText: {
      type: String,
      value: '默认文本'
    }
  },
  data: {
    buttonText: ''
  },
  lifetimes: {
    attached() {
      this.setData({
        buttonText: this.properties.initialText
      });
    }
  },
  methods: {
    handleButtonClick() {
      const newText = '按钮被点击了';
      this.setData({
        buttonText: newText
      });
      this.triggerEvent('buttonclicked', { newText });
    }
  }
});

my-component.json

{
  "component": true
}

my-component.wxml

<view class="container">
  <button bindtap="handleButtonClick">{{buttonText}}</button>
</view>

my-component.wxss

.container {
  padding: 20rpx;
}
button {
  background-color: #007aff;
  color: #fff;
  padding: 10rpx;
  border: none;
  border-radius: 5rpx;
}

🦋3.2 使用自定义组件

现在，我们在一个页面中使用这个自定义组件，并处理它的自定义事件。

☀️3.2.1 页面结构

在 pages/index 目录下修改以下文件：

• index.js
• index.json
• index.wxml
• index.wxss

☀️3.2.2 页面代码

index.js

Page({
  data: {
    message: '等待按钮点击...'
  },
  handleButtonClicked(event) {
    this.setData({
      message: event.detail.newText
    });
  }
});

index.json

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

index.wxml

<view class="container">
  <my-component initialText="点击我" bind:buttonclicked="handleButtonClicked"></my-component>
  <view>{{message}}</view>
</view>

index.wxss

.container {
  padding: 20rpx;
}

🦋3.3 解释

1. 组件初始化参数：

   • 在 my-component 组件中，我们定义了一个 initialText 属性，用于设置按钮的初始文本。

2. 组件内部事件处理：

   • 当按钮被点击时，handleButtonClick 方法被调用，更新 buttonText，并通过 triggerEvent 方法触发一个名为 buttonclicked 的自定义事件，将新的文本传递给父组件。

3. 父组件事件处理：

   • 在 index.wxml 中，我们绑定了 my-component 的 buttonclicked 事件到 index.js 中的 handleButtonClicked 方法。
   • handleButtonClicked 方法接收到事件后，更新页面的 message 数据。

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”