微信小程序—自定义组件

一、创建与使用

组件创建：

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
      })
    }
  }
})