小程序自定义组件的数据、方法和属性

1. data 数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：

Component({

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

}）

2. methods 方法

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：

Component({
  methods:{     //组件的方法列表【包含事件处理函数和自定义方法】
    addCount（）{//事件处理函数
      this.setData({ count: this.data.count + 1 })
      this._showCount(）// 通过 this 直接调用自定义方法
    },
    _showCount(）{ //自定义方法建议以_开头
      wx.showToast({
        title:'count值为：'+this.data.count,
        icon: 'none'
      })
    }
  }   
}）

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：

Component({
  //属性定义
  properties: {
    max:{           //完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
      type：Nknber，//属性值的数据类型
      value: 10     //属性默认值

      },
      max: Number   //简化定义属性的方式【不需指定属性默认值时，可以使用简化方式】
  }
}）

<my-test1 max="10"></my-test1>

4. data 和 properties 的区别

在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：

data 更倾向于存储组件的私有数据。

properties 更倾向于存储外界传递到组件中的数据。

Component({
  methods: {
    showInfo(){
      consale.log(this.data)        //输出结果：{count：0，max：10}
      console.log(this.properties)  //输出结果：{count：0,max：10}
      //结果为 true，证明 data数据和properties属性【在本质上是一样的、都是可读可写的】
      console.log(this.data === this.properties)
    }
  }
})

5. 使用 setData 修改 properties 的值

由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值，示例代码如下：

//在组件的.wxml 文件中使用properties 属性的值
<view>max属性的值为：{{max}}</view>

Component({
  properties:{max:Number },//定义属性
  methods:{
    addCount() {
      this.setData({max:this.properzies.max+1 })//使用 setData修改属性的值
    }
  }
}）