小程序组件全攻略：引用、传值、监听、observers详解
2022-12-13 09:15:46
小程序组件：助力高效小程序开发
前言
小程序组件是搭建小程序的基石，它实现了代码复用和模块化开发，大幅提升了开发效率和代码质量。本文将深入探讨小程序组件的使用技巧，涵盖引用方式、数据传递、数据监听等方面，助力开发者全面掌握小程序组件的精髓。
引用小程序组件
小程序组件的引用有两种方式：
1. json 引用
在页面 json 文件的 usingComponents 字段中，通过指定组件路径进行引用：
{
"usingComponents": {
"my-component": "/components/my-component/my-component"
}
}
2. wxml 引用
在页面 wxml 文件中，使用 <import> 标签导入组件，并通过 is 属性指定组件名称：
<import src="/components/my-component/my-component.wxml" />
<template is="my-component" data="{{}}"></template>
子组件向父组件传递数据
子组件向父组件传递数据可以通过两种方式：
1. 事件触发
子组件触发自定义事件，并在事件中携带数据参数，父组件监听该事件并接收数据：
// 子组件
this.triggerEvent('myEvent', {
data: 'hello world'
})
// 父组件
this.onMyEvent(e) {
console.log(e.detail.data) // 输出: hello world
}
2. 属性绑定
子组件通过属性绑定，将数据传递给父组件，父组件通过修改绑定属性值，间接更新子组件数据：
// 子组件
<my-component :data="data"></my-component>
// 父组件
this.setData({
data: 'hello world'
})
父组件向子组件传递数据
父组件向子组件传递数据也有两种方式：
1. 属性绑定
父组件通过属性绑定，将数据传递给子组件，子组件通过 props 属性接收数据：
// 父组件
<my-component data="{{data}}"></my-component>
// 子组件
this.data = this.props.data
2. 事件触发
父组件触发自定义事件，并在事件中携带数据参数，子组件监听该事件并接收数据：
// 父组件
this.triggerEvent('myEvent', {
data: 'hello world'
})
// 子组件
this.onMyEvent(e) {
console.log(e.detail.data) // 输出: hello world
}
数据监听 Observers
Observers 实现了组件数据监听，当数据发生变化时，触发相应的回调函数。
// 子组件
observers: {
data(newValue, oldValue) {
console.log('data changed from', oldValue, 'to', newValue)
}
}
常见问题解答
1. 小程序组件与 Page 的区别是什么？
Page 是小程序的页面，负责页面的布局和逻辑，而组件是模块化的代码块，可以复用和组合。
2. 如何在组件之间传递复杂数据？
可以使用 JSON.stringify() 和 JSON.parse() 将复杂数据转换为 JSON 字符串，再通过事件或属性传递。
3. 如何在组件中使用外部函数？
在组件的 json 文件中，通过 methods 字段定义外部函数，并在组件中调用。
4. 如何在组件中使用生命周期函数？
组件同样支持生命周期函数，例如 onLoad(), onReady(), onShow(), onHide() 等。
5. 如何解决组件样式污染？
使用 scoped 属性，将组件样式作用域限定在组件内部，避免影响其他组件。
结语
小程序组件的使用极大地提升了小程序开发效率和代码质量。通过掌握组件引用、数据传递、数据监听等技巧，开发者可以高效构建出结构清晰、功能完善的小程序，从而为用户带来更好的体验。
