自定义组件的常见构造器,详细可参考
自定义组件 | 微信开放文档developers.weixin.qq.com![7f34aa897c0f909430edc5741042ee6c.png](https://i-blog.csdnimg.cn/blog_migrate/ead0cd47f8c9575e149e3f794fb1b478.jpeg)
自定义组件好处:将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似
一、创建自定义组件
类似于页面也是由 wxml,js,json,css 四个页面组成,一般放在专门的文件夹中
![af59379efe478851f77d72a2b84db2be.png](https://i-blog.csdnimg.cn/blog_migrate/fc8a1ad2bb9dea5e244ce04236a66553.jpeg)
文件内容
![5b71e6172bbf4dc50cf3026448901404.png](https://i-blog.csdnimg.cn/blog_migrate/9a270c892ec4fcf3109b8f4b544c8cb4.jpeg)
二、引用自定组件
页面进行引用自定组件时,在json 文件中进行引用自定义组件操作
![ea050e08a2923e9c73feaeb81a44d6c2.png](https://i-blog.csdnimg.cn/blog_migrate/a5ef7188999d0fdaa5566cfd10a542ae.jpeg)
//
三、编写自定义组件
和页面编写基本一致,wxml 展示,wxss 控制样式,js传值让页面动起来
1、实现一个标题内容组件(死的简单的)
<!-- 自定义组件主要分为 标题和内容 -->
![42819ba1afd2a70e0b60ac10b61cef83.png](https://i-blog.csdnimg.cn/blog_migrate/a90398a46e912a10bc784564e053b5f8.jpeg)
样式:
/*
将标题灵活话,通过循环方式赋值,利用学过的
在组件的data 中加一个数组
// component/Tabs/Tabs.js
![53208ff97e0b5fe9091665df009c3169.png](https://i-blog.csdnimg.cn/blog_migrate/0ab5dec7aac18f089650aa8407b5e18c.jpeg)
通过wx:for 进行遍历展示
<!-- 自定义组件主要分为 标题和内容 -->
实现点击不同标题样式随之改变
* 事件回调函数在 页面js 与组件js 的区别?
* 1、页面 .js 文件中存放事件回调函数的时候存放data 同级下!!
* 2、组件 .js 文件中存放事件回调函数的时候必须放在methods(组件方法列表)
![83d648b6c4beee27a075bcf53e260e65.png](https://i-blog.csdnimg.cn/blog_migrate/539fefb01fa518982c67c4c5865ff2a7.jpeg)
// component/Tabs/Tabs.js
一般使用自定义组件时,值都是父组件(引用自定义组件的页面)进行传递的,不会在子组件(自定义组件)中对值进行处理,也就是要了解一下父子之间的传递数据,父组件通过属性方式给子组件传递参数,子组件通过事件的方式向父组件传递参数,本文只是简单介绍