微信小程序自定义组件的生命周期与数据传递方式

2023-11-25 13:27:28

前言

微信小程序作为一款轻量级应用开发框架，受到广大开发者的青睐。其中，自定义组件是构建复杂、可复用UI界面的有力工具。掌握自定义组件的生命周期和数据传递方式，是开发高质量小程序的基石。本文将深入浅出地剖析这些关键概念，帮助开发者构建出更健壮、更灵活的小程序。

自定义组件的生命周期

自定义组件的生命周期与页面生命周期息息相关，遵循以下阶段：

1. attached

组件被创建并添加到页面树中时触发。在该阶段，开发者可以执行一些初始化操作，例如获取 DOM 元素引用或设置数据。

2. ready

组件首次渲染完成后触发。在该阶段，开发者可以对组件进行操作，例如修改样式或绑定事件。

3. moved

组件在页面树中移动时触发。例如，当组件从一个页面移动到另一个页面时，会触发该生命周期。

4. detached

组件从页面树中移除时触发。在该阶段，开发者可以释放资源或执行清理操作。

数据传递方式

在小程序中，数据传递可以分为两类：父向子传递和子向父传递。

父向子传递数据

父组件可以通过两种方式向子组件传递数据：

1. properties

这是传递数据的首选方式。父组件通过设置子组件的 properties 属性，将数据传递给子组件。子组件可以通过 this.props 访问这些数据。

2. events

当父组件需要动态地向子组件传递数据时，可以使用事件。父组件通过触发一个自定义事件，将数据作为参数传递给子组件。子组件通过监听该事件，接收并处理数据。

子向父传递数据

子组件可以通过触发自定义事件，向父组件传递数据。父组件监听该事件，并在事件回调函数中接收并处理数据。

应用实例

为了更好地理解自定义组件的生命周期和数据传递方式，让我们来看一个实际的应用实例。

假设我们有一个名为 my-button 的自定义组件，它包含一个按钮和一个计数器。当按钮被点击时，计数器将增加。父组件希望在计数器发生变化时，获得通知。

子组件（my-button.wxml）

<view>
  <button bindtap="handleButtonClick">+</button>
  <view>{{ count }}</view>
</view>

import { Component } from "@tarojs/taro";
export default class MyButton extends Component {
  config = {
    properties: {
      count: {
        type: Number,
        value: 0,
      },
    },
  };

  handleButtonClick() {
    this.props.onCountChange && this.props.onCountChange(this.props.count + 1);
  }
}

父组件（index.wxml）

<view>
  <my-button onCountChange="handleCountChange" count="{{ count }}"></my-button>
</view>

import { Component } from "@tarojs/taro";
export default class Index extends Component {
  state = {
    count: 0,
  };

  handleCountChange(count) {
    this.setState({ count });
  }
}