父子组件：别让小程序变成“祖传代码”的温床
在微信小程序开发中，随着项目功能越来越复杂，将界面拆分成一个个独立、可复用的部分就显得尤为重要。这时，“父子组件”的概念就闪亮登场了。它就像搭积木，让你能像组装乐高一样构建出强大的小程序页面。
简单来说，父组件是一个“容器”或“管理者”，而子组件则是被放入这个容器里的独立“功能块”。父组件可以控制子组件，向它传递数据；子组件则可以完成自己的特定任务，并通知父组件“我这边有情况！”。
一、为什么需要父子组件？
想象一下，你正在开发一个电商小程序。商品列表页的每个商品卡片，都包含图片、名称、价格和购买按钮。如果没有组件，你需要为每个商品重复写一大段结构（WXML）和样式（WXSS）代码，维护起来简直是噩梦。
而如果我们将“商品卡片”抽离成一个独立的子组件，那么在任何需要展示商品的地方，我们只需要像使用一个标签一样，把它“放”进去即可。父组件（比如商品列表页）只需要告诉这个子组件：“嘿，这是商品A的数据，你按自己的样子展示出来”。这样一来，代码变得极其简洁、可维护，并且这个“商品卡片”组件可以在全项目复用。
二、核心用法：父传子，子传父
父子组件之间最重要的就是通信，也就是数据传递。
1. 父传子：Properties（属性）
这是最常用的通信方式。父组件通过标签属性的方式给子组件传递数据。
在子组件中： 你需要定义好准备接收哪些数据。这需要在子组件的 js 文件的 Component 构造器的 properties 段中声明。
// 子组件 child-component.js
Component({
properties: {
// 接收一个名为 title 的字符串
title: {
type: String,
value: '默认标题' // 如果父组件没传，就用这个默认值
},
// 接收一个名为 count 的数字
count: Number // 简写定义
}
})
在子组件的 WXML 中： 你可以直接使用这些属性。
<!-- 子组件 child-component.wxml -->
<view>我是子组件，标题是：{{title}}，数量是：{{count}}</view>
在父组件中： 使用子组件时，通过属性绑定传递数据。
<!-- 父页面 parent-page.wxml -->
<child-component title="来自父组件的问候" count="{{parentCount}}"></child-component>
// 父页面 parent-page.js
Page({
data: {
parentCount: 100
}
})
这样，子组件就能接收到并展示父组件传递过来的数据了。
2. 子传父：自定义事件
当子组件内部发生了一些事情（比如按钮被点击），需要通知父组件时，就需要用到自定义事件。
在子组件中： 通过 this.triggerEvent 来触发一个自定义事件，并可以携带数据。
// 子组件 child-component.js
Component({
methods: {
onTapButton() {
// 触发一个名为 'myevent' 的事件，并携带数据 {value: '来自子组件的数据'}
this.triggerEvent('myevent', {value: '来自子组件的数据'})
}
}
})
在父组件中： 在引用子组件的标签上，监听这个自定义事件，并绑定一个处理函数。
<!-- 父页面 parent-page.wxml --> <child-component bind:myevent="onMyEvent"></child-component>
// 父页面 parent-page.js
Page({
onMyEvent(e) {
// e.detail 就是子组件触发事件时携带的数据
console.log('收到子组件消息：', e.detail.value)
}
})
这样，父子组件之间就实现了双向通信的闭环。
三、进阶技巧与实用场景
1. 使用插槽（slot）让组件更灵活：
有时父组件想往子组件里插入一些自定义内容。比如，一个弹窗组件，其标题和内容希望由父组件决定。这时就可以在子组件的WXML中使用 <slot> 标签占位。
<!-- 子组件（弹窗框架） --> <view class="modal"> <view class="header"><slot name="title"></slot></view> <view class="content"><slot></slot></view> <!-- 默认插槽 --> </view>
<!-- 父组件使用 --> <my-modal> <view slot="title">这是自定义标题</view> <text>这里的所有内容都会放到默认插槽里</text> </my-modal>
2. 访问子组件实例：
在极少数情况下，父组件可能需要直接调用子组件的方法或访问其数据。可以通过 this.selectComponent 来获取子组件实例。
// 在父组件中
Page({
getChildComponent() {
const child = this.selectComponent('#my-child') // my-child是子组件的id或class
child.childMethod() // 调用子组件的方法
}
})
但请注意，这种方式应谨慎使用，因为它破坏了组件的封装性，优先考虑使用“属性”和“事件”进行通信。
四、总结与最佳实践
掌握父子组件，是构建可维护、高性能微信小程序的关键一步。记住以下要点：
- 单一职责： 每个组件只做好一件事。比如“轮播图组件”、“搜索框组件”、“按钮组件”。
- 数据驱动： 父组件通过属性（Properties）控制子组件的状态和显示。
- 事件通信： 子组件通过自定义事件向父组件报告内部状态变化。
- 合理拆分： 当一段WXML和JS逻辑在多个地方重复出现，或者一个页面过于庞大时，就是拆分成组件的好时机。
从简单的UI按钮，到复杂的业务模块（如登录面板、地址选择器），父子组件模式都能让你的代码结构清晰如画，团队协作顺畅高效。现在就开始尝试把你的小程序页面“组件化”，享受这种模块化开发带来的乐趣和效率吧！