微信小程序学习第7周————自定义组件Componet

自定义组件：
提示开发效率，页面代码简洁

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来绑定子组件的自定义事件

属性的值当然就是页面组件的方法名了，这样就实现了在子组件使用页面中定义的方法了。