微信小程序开发笔记：组件通信和跨页面通信

小程序的组件化设计理念让开发更加模块化和可复用。本文将深入探讨小程序中的组件通信和跨页面通信，帮助开发者构建高效、可维护的应用。

组件通信

组件间的通信是小程序开发中必不可少的。官方文档中介绍了两种常用的方式：

1. Props & triggerEvent

• 父组件向子组件传递数据：通过 props 传递数据。
• 子组件向父组件发送事件：通过 triggerEvent 触发事件。

2. provide & inject

• 组件提供数据源：父组件通过 provide 提供数据源。
• 组件注入数据源：子组件通过 inject 注入数据源。

跨页面通信

小程序中，页面之间通信也十分重要。以下几种方式可以满足不同的场景需求：

1. 全局事件监听

• 触发页面事件：通过 wx.triggerEvent 触发自定义全局事件。
• 监听全局事件：通过 wx.onGlobalEvent 监听自定义全局事件。

2. URL 参数传递

• 通过页面跳转 URL 传递参数：在跳转时，通过 url 参数携带数据。
• 在新页面接收参数：通过 wx.getLaunchOptionsSync() 获取参数。

3. StorageAPI

• 设置存储数据：通过 wx.setStorage() 设置存储数据。
• 获取存储数据：通过 wx.getStorage() 获取存储数据。

案例分析

组件通信：传递表单数据

父组件通过 props 传递表单项，子组件通过 triggerEvent 发送提交事件，父组件处理表单数据。

// 父组件
<Form @submit="submitForm">
  <Input v-model="formData.name"></Input>
  <Button type="primary" @click="submitForm">提交</Button>
</Form>

// 子组件
<template>
  <form @submit="$emit('submit', {name: formData.name})">
    <input v-model="formData.name"></input>
    <button type="submit">提交</button>
  </form>
</template>

跨页面通信：购物车商品共享

在多个页面间共享购物车商品信息。通过全局事件触发商品添加事件，在所有页面监听事件并更新购物车数据。

// 页面A
wx.triggerEvent('cart-add', {id: 1, name: '商品1'})

// 页面B
wx.onGlobalEvent('cart-add', (res) => {
  this.cart.push(res)
})

SEO优化