[猫头虎分享21天微信小程序基础入门教程] 第12天：小程序的自定义组件开发

本文主要是介绍[猫头虎分享21天微信小程序基础入门教程] 第12天：小程序的自定义组件开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

[猫头虎分享21天微信小程序基础入门教程] 第12天：小程序的自定义组件开发

第12天：小程序的自定义组件开发 🛠️

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解如何开发自定义组件。自定义组件可以提高代码的复用性和模块化程度，使开发更加高效和灵活。🚀

自定义组件的基础

一、创建自定义组件

1. 创建组件目录和文件

首先，在项目根目录下创建一个 components 文件夹，在其中创建一个自定义组件，例如 my-component：

components/my-component/my-component.jsmy-component.jsonmy-component.wxmlmy-component.wxss

2. 定义组件的配置文件

在 my-component.json 文件中定义组件的基本配置：

{"component": true
}

3. 定义组件的逻辑和样式

在 my-component.js 文件中定义组件的逻辑：

Component({properties: {title: {type: String,value: 'Default Title'}},data: {// 组件内部数据},methods: {onTap() {this.triggerEvent('customEvent', { message: 'Hello from component' });}}
});

在 my-component.wxml 文件中定义组件的模板：

<view class="container"><text>{{title}}</text><button bindtap="onTap">Click Me</button>
</view>

在 my-component.wxss 文件中定义组件的样式：

.container {padding: 20rpx;border: 1px solid #ddd;border-radius: 5rpx;text-align: center;
}

二、使用自定义组件

1. 注册组件

在使用组件的页面中注册组件。在页面的 json 文件中添加如下配置：

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

2. 使用组件

在页面的 wxml 文件中使用组件：

<view class="page"><my-component title="Custom Title" bind:customEvent="handleCustomEvent"></my-component>
</view>

在页面的 js 文件中处理组件事件：

Page({handleCustomEvent(event) {console.log(event.detail.message); // 输出: Hello from component}
});

组件间通信

一、父组件向子组件传递数据

通过 properties 向子组件传递数据：

Component({properties: {title: {type: String,value: 'Default Title'}}
});

二、子组件向父组件传递事件

通过 triggerEvent 向父组件传递事件：

methods: {onTap() {this.triggerEvent('customEvent', { message: 'Hello from component' });}
}

三、组件之间的数据和事件传递

父组件向子组件传递数据，子组件向父组件传递事件：

<my-component title="Custom Title" bind:customEvent="handleCustomEvent"></my-component>

Page({handleCustomEvent(event) {console.log(event.detail.message); // 输出: Hello from component}
});

组件的生命周期

一、组件的生命周期函数

组件有一系列生命周期函数，可以在不同阶段执行代码：

Component({lifetimes: {attached() {console.log('Component attached to DOM');},ready() {console.log('Component is ready');},detached() {console.log('Component detached from DOM');}}
});

二、页面的生命周期函数

组件也可以监听页面的生命周期函数：

Page({onLoad() {console.log('Page loaded');},onReady() {console.log('Page ready');},onUnload() {console.log('Page unloaded');}
});

小测试 🧪

创建一个自定义组件，并在页面中使用它。
实现父组件向子组件传递数据，子组件向父组件传递事件。

今日学习总结 📚

概念	详细内容
自定义组件	创建组件目录和文件，定义组件的配置、逻辑和样式
组件间通信	父组件向子组件传递数据，子组件向父组件传递事件
组件的生命周期函数	组件和页面的生命周期函数