小程序组件创建&数据传递

1. 创建组件（计步器）

首先在根目录创建components文件夹中创建num-controller文件夹（自定义的组件名字），在这个文件夹上点击右键新建一个component，名字也叫做num-controller。

• num-controller.wxml

  //减号
  
  //数字
  
  //加号
  

• num-controller.json

{
  "component": true,
  "usingComponents": {}
}

这个文件在创建component的时候会自动写入这段代码。

• num-controller.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num: Number
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    add() {

      this.setData({
        num: this.data.num + 1
      })
      this.triggerEvent('numChange', this.data.num);
    },
    sub() {
      if(this.data.num > 0) {
        this.setData({
          num: this.data.num - 1
        })
      }
      this.triggerEvent('numChange', this.data.num);
    }
  }
})

组件内部接收一个参数num，类型是Number；
点击加号触发add方法，首先把init状态变为false，然后数字+1，同时触发numChange方法将改变的数字传到组件外部；
点击减号触发sub方法，数字-1，如果数字为0则把init状态变为true，同时触发numChange方法将改变的数字传到组件外部。

将组件数据传到外部的方法为this.triggerEvent('方法名',{要传递的数据})。

2. 引入组件

在index.wxml里引入组件：

index.json

{
  "usingComponents": {
    "num-controller": "/components/num-controller/num-controller"//组件地址
  }
}

在json文件里注册组件。

index.js

data: {
    num: 1
},
numChange(e) {
    const numi = e.detail;

 }

data里的num是从组件外传入的num，在numChange方法里用e.detail可以拿到组件内部通过this.triggerEvent传出来的数据