企业官网建设流程全解析

1. 组件通信的核心思路与方案选型

做小程序开发，只要页面复杂到一定程度，就一定会走到组件化这一步。我自己的项目里，最早把所有逻辑全部写在页面里，几百行代码挤在一起，改一个功能要上下翻半天，后来痛定思痛，把可复用的部分全部拆成了组件。拆完以后第一个要面对的问题就是：组件之间怎么说话？

微信小程序的组件通信，本质上跑不出几条路线。父组件往子组件传数据，用 properties；子组件往父组件上报事件，用 triggerEvent；父组件要直接操控子组件内部状态，用 selectComponent 拿实例；兄弟组件之间，就得借助父组件中转或者全局事件。这套东西搞明白了，再复杂的页面结构都能理清楚。

我见过不少新手在父子通信上绕弯子。有人用全局变量存数据，页面刷新以后数据不同步，排查半天才发现是缓存脏了；有人把所有数据全塞给子组件 properties，结果子组件里改来改去，父组件完全感知不到，最终还是要靠事件一层层往上抛。其实微信官方给的 Component 构造器本身就把这套机制设计得很完整，只要按规矩走，父子通信是完全可以做到清晰可控的。

选择哪种通信方式，我的判断标准很简单：看信息流向和数据归属。数据是父组件的，显示是子组件的，就用 properties 传下去；操作发生在子组件，但影响的是父组件或其他兄弟组件，就用事件抛上来；操作来自父组件，但需要触发子组件内部行为（比如调用子组件某个方法），就用 selectComponent。这三条线捋清楚，80%的场景都能覆盖。

下面我用一个实际做过的功能来贯穿全文：做购物车数量选择器。父页面维护一个商品列表，每个商品项是子组件《quantity-selector》，子组件里有一个输入框和加减按钮。这个功能虽然简单，但父子通信的所有常见姿势都能用上，非常适合拿来讲清楚原理和踩坑点。

2. 父传子：properties 属性绑定的完整拆解

2.1 properties 的声明与类型校验

父组件向子组件传值，最标准的方式就是通过 properties。它相当于子组件对外暴露的接口，声明了子组件需要接收哪些数据、什么类型、默认值是多少。

// components/quantity-selector/quantity-selector.js Component({ properties: { // 基础写法 value: { type: Number, value: 1, observer(newVal, oldVal) { console.log('value 从', oldVal, '变成', newVal); } }, // 简化写法，适合只声明类型的情况 min: Number, max: { type: Number, value: 99 }, // 传入对象类型时必须用 Object，不能直接写 {} skuInfo: { type: Object, value: {} } } });

需要注意，properties 的类型声明是基础类型就直接写Number、String、Boolean这些大写形式；数组和对象必须写成Array和Object。最容易被忽略的是默认值：当类型是 Object 或 Array 时，默认值需要用函数返回一个独立实例，避免多个组件实例共享同一个引用。

2.2 父组件绑定数据的三种写法

在使用子组件的页面 json 里先注册：

{ "usingComponents": { "quantity-selector": "/components/quantity-selector/quantity-selector" } }

然后页面 wxml 里就可以绑定数据了：

<quantity-selector value="{{item.quantity}}" min="1" max="{{item.stock}}" skuInfo="{{item.sku}}" bind:change="onQuantityChange" >Component({ properties: { value: { type: Number, value: 1 } }, data: { innerValue: 1 }, lifetimes: { attached() { // 把外部传来的初始值拷贝到内部 this.setData({ innerValue: this.properties.value }); } } });

这里我建议用observers来实时同步，而不是只依赖attached。因为attached只在组件初始挂载时执行一次，如果父组件之后修改了 properties，内部innerValue就会和外部值脱节。

2.4 observers 监听器的正确用法

微信小程序从基础库 2.6.1 开始支持observers，它比 properties 里的observer更灵活，可以同时监听多个字段：

Component({ properties: { value: Number, step: { type: Number, value: 1 } }, data: { current: 1 }, observers: { // 单个字段监听 'value': function(val) { this.setData({ current: val }); }, // 多个字段联动监听 'value, step': function(value, step) { console.log('value 或 step 改变了', value, step); }, // 对象内部字段的变化监听 'a.b': function(val) { console.log('对象内部字段变化', val); } } });

对象字段监听这块，官方文档写得比较隐藏。当 properties 里传进来一个对象obj，你想监听obj.name的变化，要写成'obj.name': function(val) {}这种形式。我实际测试下来，这个监听在对象内部字段被 setData 修改时确实会触发。但是注意，如果直接用this.data.obj.name = 'xxx'这样改，是不会触发任何更新的，必须走 setData。

2.5 推荐的双向绑定方案：model: 前缀

小程序组件其实支持一种语法糖，可以让父组件和子组件之间的 value 形成“看起来像双向绑定”的效果。这就是model:前缀。

子组件定义时可以指定model字段：

Component({ properties: { value: Number }, model: { // 这里表示用 value 这个属性绑定 prop: 'value', // 这里表示监听 change 事件回传 event: 'change' }, methods: { onTap() { // 触发后父组件对应数据也会跟着更新 this.triggerEvent('change', this.properties.value + 1); } } });

父组件 wxml：

<quantity-selector model:value="{{item.quantity}}" />

这样写，子组件内部触发change事件后，父组件里item.quantity会直接被更新，不需要在父组件里再写一个bind:change="onQuantityChange"然后手动 setData（当然如果你要在父组件里做额外处理，还是可以继续监听的）。model:语法在基础库 2.9.2 以后都支持，我自己的项目已经大量使用，非常省事。

3. 子传父：triggerEvent 事件系统的核心用法

3.1 triggerEvent 参数详解

子组件往父组件传消息，靠的是自定义事件。方法就是this.triggerEvent(eventName, detail, options)。

第一个参数是自定义事件名，第二个参数是传给父组件的业务数据，第三个参数是可选配置。事件名建议用小写字母加连字符的格式，比如change、input、quantity-change，不要用驼峰。原因后面避坑部分详细说。

例如数量选择器组件里，点击加号的逻辑：

methods: { onAdd() { const current = this.data.current; const max = this.properties.max; if (current >= max) { wx.showToast({ title: '已达上限', icon: 'none' }); return; } const newValue = current + this.properties.step; this.setData({ current: newValue }); // 触发自定义事件，把新值传回父组件 this.triggerEvent('change', { value: newValue, skuId: this.properties.skuInfo.skuId }); } }

父组件里这样监听：

<quantity-selector bind:change="onQuantityChange" />

Page({ onQuantityChange(event) { // event.detail 就是子组件传上来的数据 const { value, skuId } = event.detail; // event.currentTarget.dataset 可以拿到 wxml 上绑定的自定义数据 const index = event.currentTarget.dataset.index; this.setData({ [`cartList[${index}].quantity`]: value }); } });

3.2 detail 传参与 dataset 传参的区别和选择

很多初学者会混淆 event.detail 和 event.currentTarget.dataset。简单说：detail 是子组件内部主动通过 triggerEvent 传上来的数据，dataset 是 wxml 上通过>this.triggerEvent('change', { value: 1 }, { bubbles: true, // 事件是否冒泡，默认 false composed: true, // 事件是否能穿越组件边界，默认 false capturePhase: false // 事件是否能进入捕获阶段，默认 false });

我个人的习惯是：默认不加扩展参数，只有明确需要跨组件冒泡时才设为bubbles: true, composed: true。因为设置冒泡以后，事件会一直冒泡到页面，如果你在某个中间组件里也监听了同名事件，就可能被意外触发。尽量用精确命名区分事件源，比如dialog-change和item-change，而不是都用change。

3.4 父组件内部直接修改子组件属性数据的写法

有时候子组件的事件已经触发，父组件也收到了，但父组件在 setData 的时候写错了层级表达式，导致页面不刷新。小程序支持用多维路径更新数据：

Page({ data: { cartList: [ { id: 1, name: '商品A', quantity: 1 }, { id: 2, name: '商品B', quantity: 2 } ] }, onQuantityChange(event) { const index = event.currentTarget.dataset.index; const { value } = event.detail; // 用数组下标直接更新，只会改动这一个字段，性能好 this.setData({ [`cartList[${index}].quantity`]: value }); } });

这种写法比先拷贝整个数组再更新要高效，而且不容易产生额外的 setData 开销。微信小程序的 setData 本身就是有性能瓶颈的，能精确到字段最好。

4. 父组件主动调用子组件：selectComponent 拿到组件实例

4.1 selectComponent 的三种传参方式

有时候不是子组件主动上报，而是父组件想主动让子组件做点什么。比如购物车页面上有个“全选”按钮，点击后需要把所有数量选择器重置为 0；再比如表单页面的“提交”按钮，需要让所有子组件校验自己的数据。这个时候就要用到 selectComponent 获取子组件实例，然后直接调用子组件里定义的方法。

在 wxml 里给子组件加 id 或者 class：

<quantity-selector id="item-{{index}}" class="quantity-item" />

然后在父组件方法里调用：

Page({ resetAllQuantity() { // 通过 id 获取单个组件实例 const firstItem = this.selectComponent('#item-0'); if (firstItem) { firstItem.resetQuantity(); } // 通过 class 获取多个组件实例，返回数组 const allItems = this.selectAllComponents('.quantity-item'); allItems.forEach(item => { item.resetQuantity(); }); } });

selectComponent接收一个选择器，支持#id和.class两种方式，返回第一个匹配的组件实例；selectAllComponents则返回所有匹配实例的数组。需要注意，页面上的this.selectComponent只能选到页面直接使用的组件实例，如果组件嵌在子组件内部，需要在对应子组件里再调用。

4.2 通过实例直接调用子组件方法

子组件里写一个公开方法：

Component({ methods: { resetQuantity() { this.setData({ current: this.properties.min || 1 }); this.triggerEvent('change', { value: this.data.current }); } } });

父组件调用时，可以直接拿到实例上的方法并执行。这种方式适合业务事件明确、调用频率低的场景。我自己的经验是：能通过事件驱动解决的问题，尽量不要直接用 selectComponent。因为 selectComponent 会产生强耦合，父组件需要知道子组件的内部方法名，一旦子组件内部重构，父组件也必须跟着改。事件驱动则是“子组件只负责说发生了什么”，父组件和子组件之间的依赖更松。

4.3 selectComponent 的时机问题

这个方法有个高频踩坑点：获取不到实例，或者拿到 null。最常见的原因是在ready之前调用。组件初始化需要时间，如果你在onLoad里立刻 selectComponent，大概率拿到 null。正确的时机是在页面onReady或组件ready生命周期里调用。

如果是在 setData 之后立刻调用 selectComponent，也需要小心。setData 是异步更新视图的，数据变了不代表视图已经渲染完成，此时 selectComponent 可能取到旧的实例或者取不到。解决办法是配合wx.nextTick：

Page({ changeData() { this.setData({ list: newList }, () => { // setData 回调里再拿实例，此时视图已更新 const comp = this.selectComponent('#item-0'); // 或者用 wx.nextTick }); } });

如果你在自定义组件内部想获取自身实例，直接用this就可以；但要在组件内获取父组件实例，可以用this.triggerEvent让父组件自己处理，官方并没有直接提供获取父实例的 API——这也侧面说明微信小程序的设计思路就是尽量让数据流单向化。

5. 其他通信方式与业务实战经验

5.1 兄弟组件通信：经父组件中转

兄弟组件之间通信没有直接的 API，最常规的做法是“状态提升”，把共享的数据放到父组件维护，子组件 A 触发事件，父组件更新数据，再通过 properties 传给子组件 B。这其实就是 React 里的单向数据流思路，在小程序里同样适用。

假定页面左侧是一个商品分类列表组件category-list，右侧是商品列表组件product-list。用户点击分类，分类组件要在父页面触发select-category事件，把categoryId传给父页面，父页面拿categoryId请求数据，再更新给商品列表组件的productList属性。这个过程清晰流畅，两个子组件之间完全不需要感知对方存在。

5.2 全局通信：getApp().globalData 与事件总线

当项目越来越大，父组件中转也会写得烦琐。此时可以引入全局状态。最基础的方式是getApp().globalData，但它不是一个响应式系统，数据改了不会自动通知组件刷新。所以很多项目会在全局数据之上再做一层简单的订阅发布。

我自己写过一个几十行的事件总线工具，核心代码：

// utils/event-bus.js const listeners = {}; function on(eventName, callback) { if (!listeners[eventName]) { listeners[eventName] = []; } listeners[eventName].push(callback); } function off(eventName, callback) { if (!listeners[eventName]) return; listeners[eventName] = listeners[eventName].filter(item => item !== callback); } function emit(eventName, data) { if (!listeners[eventName]) return; listeners[eventName].forEach(callback => callback(data)); } module.exports = { on, off, emit };

组件 A 里const bus = require('../../utils/event-bus'); bus.emit('category-changed', categoryId);组件 B 里在 lifetimes attached 里bus.on('category-changed', this.handleCategoryChange)，在 detached 里bus.off('category-changed', this.handleCategoryChange)。

这里有一个非常关键的习惯：在组件销毁时必须移除监听，否则组件销毁了回调还在全局 listeners 里，不仅内存泄漏，还会让已经销毁的组件再收到事件，出现setData报错。组件 detached 生命周期里一定要 off 掉所有自己注册的监听。

官方其实也提供了基于页面栈的通信方式，getCurrentPages()可以拿到当前页面栈，通过页面实例的this.setData可以直接修改页面数据。这种方式适合临时快速改动，但它破坏了页面封装，建议只在调试时使用。

5.3 多级组件嵌套：relations 或逐层转发

多级嵌套场景下，比如 A 组件包含 B 组件，B 组件包含 C 组件，C 要向 A 通信。有两种选择：逐层 triggerEvent 转发，或者使用relations。relations是官方提供的组件间关联机制，可以在关联组件里直接调用对方的方法：

// components/a/a.js Component({ relations: { './b': { type: 'child', linked(target) { console.log('B 组件挂载了', target); } } } });

但我必须说一句大实话：relations 的 API 不直观，而且限制很多（必须声明路径、关联关系是强耦合的），我在实际项目中用得非常少。大多数情况下，多级传递通过bubbles: true, composed: true让事件直接冒泡到顶层，或者在每一层组件的 methods 里显式转发，反而更直观、更好排查。

5.4 实战场景串联：完整实现购物车数量选择器

把前面所有知识点串起来，写一个完整的数量选择器组件。这个组件要满足：

• 外部能设置初始数量、最小值、最大值、步长
• 用户点击加减，组件内部更新显示，同时通知外部
• 外部能通过 selectComponent 调用重置方法
• 达到边界值时提示并阻止

组件 wxml：

<view class="quantity-selector"> <view class="quantity-btn {{current <= min ? 'disabled' : ''}}" bindtap="onDecrease">-</view> <view class="quantity-value">{{current}}</view> <view class="quantity-btn {{current >= max ? 'disabled' : ''}}" bindtap="onAdd">+</view> </view>

组件 js：

Component({ properties: { value: { type: Number, value: 1 }, min: { type: Number, value: 1 }, max: { type: Number, value: 999 }, step: { type: Number, value: 1 } }, data: { current: 1 }, observers: { 'value': function(val) { if (typeof val === 'number' && val !== this.data.current) { this.setData({ current: val }); } } }, lifetimes: { attached() { const initial = Number(this.properties.value) || this.properties.min; this.setData({ current: initial }); } }, methods: { onAdd() { const next = this.data.current + this.properties.step; if (next > this.properties.max) { wx.showToast({ title: '不能再加了', icon: 'none' }); return; } this.setData({ current: next }); this.emitChange(next); }, onDecrease() { const next = this.data.current - this.properties.step; if (next < this.properties.min) { wx.showToast({ title: '不能再减了', icon: 'none' }); return; } this.setData({ current: next }); this.emitChange(next); }, emitChange(val) { this.triggerEvent('change', { value: val }); }, resetQuantity() { this.setData({ current: this.properties.min }); this.emitChange(this.properties.min); } } });

这里的 observers 和 lifetimes 保证了：外部传值变化时内部跟着变，内部操作时通知外部。配合父页面使用model:value="{{item.quantity}}"就可以实现一个非常顺滑的双向绑定，比自己手动在父页面里中转 message 方便得多。

6. 高频问题排查与避坑指南

6.1 事件不触发，或者父组件收不到事件

这是最让人头痛的问题之一。先检查事件名是否匹配。子组件里this.triggerEvent('change', ...)，父组件 wxml 里写bind:change或bindchange都是可以的，但要保证名字完全一致。如果你的事件名是驼峰myEvent，在 wxml 里写bind:my-event是不匹配的，直接监听bindmyEvent才生效。

第二个排查点是事件冒泡配置。如果子组件嵌套在中间组件里，普通事件默认不会冒泡到外层，你需要在 triggerEvent 第三个参数里显式加bubbles: true, composed: true，否则监听只能写在直接使用子组件的那个层级。

第三个比较容易忽略的是：子组件内部在 setData 回调或异步函数里触发事件时，要保证this指向正确。用了普通函数而不是箭头函数，或者回调里this丢失，都会导致 triggerEvent 直接报错或静默失败。

6.2 observers 和 observer 触发不了或无限循环

properties 里自带的observer和observers是两套体系。如果你在一个字段上同时用两者，触发顺序是 observers 在 observer 之后，而且可能会有重复逻辑，建议只保留一个。

无限循环通常是因为 observer 里又 setData 了同一个字段。比如：

properties: { value: { type: Number, observer(val) { this.setData({ value: val + 1 }); // 会再次触发 observer，无限循环 } } }

这种写法会一直循环，小程序会提示警告甚至卡死。正确的做法是在组件内部维护独立的 data 字段，观察 properties 变更后只更新 data 内部字段，不要回头改 properties。

6.3 selectComponent 拿不到组件实例

先看生命周期。页面onLoad里拿不到，改到onReady里拿。组件之间嵌套时，外层组件ready里去 select 内层组件，通常是可以的，但如果你用了wx:if或列表渲染，组件可能是后创建的，需要配合wx.nextTick或 setTimeout 延时获取。

另一个隐蔽问题：selectComponent支持传入自定义组件本身的选择器，但必须是页面的usingComponents里声明过的组件。如果你在模板里用了某个组件，但在 json 里没有声明（比如全局组件），可能也能渲染，但 select 不到。

6.4 组件内部修改 properties 的木马效应

最后再强调一下单项数据流的重要性。子组件内部直接修改 properties 的值不会报错，但数据会“悬空”——父组件不知道，兄弟组件不知道，只有子组件自己变了，而且下次父组件重新渲染又会把它覆盖回去。排查这类问题，最直观的表现就是：组件里显示的值和父组件传下来的值不一致。

我现在项目里定了一个规矩：所有传入组件的 properties 在组件内部一律视为只读常量；如果要修改，先复制到 data 里再改；改完必须通过 triggerEvent 通知父组件；父组件收到后再决定是否更新传给自己的数据。这套流程跑顺以后，组件通信的 bug 率直线下降。

6.5 快速排查速查表

微信小程序的组件通信，说复杂也复杂，说简单也简单。我个人最大的体会是：不要迷信某一种机制能通吃所有场景，也不要拼出一堆高深的写法来显得技术厉害。踏踏实实按照“父传子用 properties，子传父用 triggerEvent，跨层用冒泡或者中转，少用 selectComponent”这套组合拳来写，后期维护起来会轻松很多。如果你正在开发一个页面复杂的小程序，建议从最基础的父子通信开始，把 dependencies 关系梳理清楚，再逐步引入全局状态和事件总线，最后你会发现，组件的边界清晰了，整个项目的代码质量也随之提升一大截。