揭秘微信小程序自定义组件复用开发技巧

一、自定义组件在微信小程序开发中的重要性
在微信小程序开发里，自定义组件复用开发技巧能极大提高开发效率，避免代码重复。比如开发电商小程序，商品列表、购物车等部分可做成组件复用。
二、自定义组件的创建
1. 结构文件（.wxml）：就像房子的框架，定义组件的页面结构。例如创建一个简单的按钮组件，在按钮组件的.wxml 文件里写上 `<button>{{buttonText}}</button>`，这里 `buttonText` 是按钮显示的文字。
2. 样式文件（.wxss）：如同房子的装修，设置组件的样式。在按钮组件的.wxss 文件中可以写 `button { background - color: #007aff; color: white; }` 来设置按钮的背景色和文字颜色。
3. 脚本文件（.js）：是组件的“大脑”，负责逻辑处理。在按钮组件的.js 文件中，要定义组件的属性、数据、方法等。比如：

Component({properties: {buttonText: {type: String, value: '默认按钮'}},data: {},methods: {onButtonClick: function() {console.log('按钮被点击了');}}})

这里定义了 `buttonText` 属性，还添加了按钮点击事件的处理方法。
4. 配置文件（.json）：明确组件的基本信息。在按钮组件的.json 文件中写上 `{ "component": true }` 表明这是一个组件。
三、自定义组件的使用
1. 在页面.json 文件中引入组件。比如在某个页面要使用按钮组件，在该页面的.json 文件里添加：

{"usingComponents": {"my - button": "/components/button/button"}}

这里 `my - button` 是在页面中使用组件的标签名，后面是组件的路径。
2. 在页面.wxml 文件中使用组件。在页面的.wxml 文件里写上 ``，这样就把按钮组件添加到页面中了。
四、组件间的通信
1. 父组件向子组件传值：通过属性传递。比如父组件有个变量 `parentData`，在使用子组件时可以这样传值 ``。
2. 子组件向父组件传值：通过触发事件。在子组件里触发一个自定义事件，父组件监听这个事件来获取子组件的数据。例如子组件里写 `this.triggerEvent('myEvent', {data: '子组件数据'});`，父组件在使用子组件时监听这个事件 ``，并在父组件的.js 文件里实现 `handleMyEvent` 方法来处理数据。
五、组件的复用注意事项
1. 组件的独立性：组件要尽量独立，不依赖外部的特定环境，这样才能在不同场景复用。
2. 数据的隔离：不同实例的数据要相互隔离，避免数据混乱。
参考资料：https://developers.weixin.qq.com/miniprogram/dev/framework/custom - component/