小程序 自定义组件 属性值_小程序---自定义组件简单使用

自定义组件的常见构造器，详细可参考

自定义组件 | 微信开放文档​developers.weixin.qq.com

自定义组件好处：将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似

一、创建自定义组件

类似于页面也是由 wxml，js，json，css 四个页面组成，一般放在专门的文件夹中

文件内容

二、引用自定组件

页面进行引用自定组件时，在json 文件中进行引用自定义组件操作

//

三、编写自定义组件

和页面编写基本一致，wxml 展示，wxss 控制样式，js传值让页面动起来

1、实现一个标题内容组件（死的简单的）

<!-- 自定义组件主要分为 标题和内容 -->

样式：

/* 

将标题灵活话，通过循环方式赋值,利用学过的

在组件的data 中加一个数组

// component/Tabs/Tabs.js

通过wx:for 进行遍历展示

<!-- 自定义组件主要分为 标题和内容 -->

实现点击不同标题样式随之改变

* 事件回调函数在 页面js 与组件js 的区别?
* 1、页面 .js 文件中存放事件回调函数的时候存放data 同级下！！
* 2、组件 .js 文件中存放事件回调函数的时候必须放在methods(组件方法列表)

// component/Tabs/Tabs.js

一般使用自定义组件时，值都是父组件（引用自定义组件的页面）进行传递的，不会在子组件（自定义组件）中对值进行处理，也就是要了解一下父子之间的传递数据，父组件通过属性方式给子组件传递参数，子组件通过事件的方式向父组件传递参数，本文只是简单介绍