自定义组件:
提示开发效率,页面代码简洁
1、创建组件目录文件夹
在page文件夹同级目录下创建componet文件夹用来安装目录
2、创建组件文件夹
创建listView文件夹–》右键文件夹新建componet文件
3、其中js文件与json文件与page页面中的文件有不同之处
js文件内容如下:
Component({
/**
* 组件的属性列表
*/
properties: {
对外属性,即如果外部的wxml文件传入数据时,会把数据设置成properties的属性。
},
/**
* 组件的初始数据
*/
data: {
这里的data与page对象中一个意思
},
/**
* 组件的方法列表
*/
methods: {
这里写组件的方法
}
4、使用自定义组件
要使用自定义组件的json文件中的usingComponets属性定义自定义组件的标签名和路径
定义完后,xml文件中使用自定义组件
其中obj就是要往组件js文件中Componet对象下的properties对象传入值,从而活动自定义组件与页面的数据流。
这里学习一个关于自定义组件间通信的方法:
this.triggerEvent(’ ',{}):
第一个参数是自定义事件名称,这个名称是在页面调用组件时用bind绑定事件名称,
第二个参数是对象形式,可以传状态和值
下面我演示子组件方法调用页面的方法:
子组件向页面组件通信,定义了一个自定义事件的名称
页面组件用bind来绑定子组件的自定义事件
属性的值当然就是页面组件的方法名了,这样就实现了在子组件使用页面中定义的方法了。