一、创建与使用
组件创建:
1.在小程序项目根目录新建components文件夹
2.在components文件夹中创建文件夹,自定义命名,如nav
3.右击nav文件夹,选择新建Component,即创建出js、json、wxml、wxss四个文件
组件使用(局部引用与全局引用):
在.json文件中引用组件,组件引用格式:
"usingComponents": {
"引用后的名字":"组件路径"
}
局部引用:只在当前页面使用自定义组件,在其他页面中引入不起作用
1.在要使用组件页面的json文件中进行配置
2.在要使用组件页面的wxml文件中引入
全局引用:可在每个页面中使用自定义组件
1.在全局文件app.json文件中配置
2.在任意小程序中页面的wxml文件中引用都可以使用组件
二、自定义组件的属性
1.在组件的.js文件中,定义属性properties
属性propertise和数据data用法相同,都是可读可写,但是,data更倾向于存储组件的私有数据,properties更倾向于存储外界传递到组件中的数据
2.声明属性节点,并进行定义
Component({//属性定义properties: {//1.完整定义属性方式,可指定属性默认值title: {type: String,value: ''},//2.简化定义属性方式title: String}})
三、自定义组件数据监听器
1.创建命名为sum的自定义组件,并使用局部引用至页面
2.在组件的wxml文件中进行布局,并添加事件处理函数
3.在组件的js文件中,定义初始数据a,b,sum的值;在组件的方法中声明对应函数
4.添加observers数据监听器节点,监听数据a,b的值并setData sum 的数据变化
sum.wxml
sum.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {a:0,b:0,sum:0},/*** 组件的方法列表*/methods: {adda(){this.setData({a : this.data.a + 1})},addb(){this.setData({b : this.data.b + 1})}},//数据监听节点observers:{'a, b':function(newa,newb){this.setData({sum:newa + newb})}}})