19、组件中的数据、方法和属性

组件数据

在小程序的组件中，用于组件模版渲染的私有数据，需要定义到data对象中。

// components/test1/test1.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    count: 0
  },
})

组件方法

在小程序的组件中，事件处理函数饿自定义方法，需要定义到methods对象中。

<!--components/test1/test1.wxml-->
<button bind:tap="addCount">添加</button>

// components/test1/test1.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    count: 0
  },
  /**
   * 组件的方法列表
   */
  methods: {
    addCount() {
      this.setData({
        count: this.data.count + 1
      })
    }
  }
})

组件属性

properties是组件对外的属性，用来接收外界传递到组件内的数据。

<!--pages/home/home.wxml-->
<view>
  <my-test1 max="10"></my-test1>
</view>

// components/test1/test1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    max: {
      type: Number, // 数据类型
      value: 10 // 默认值
    },
    min: Number
  }
})

data和properties的区别？
1、在小程序中data和properties都是可读可写的，这和Vue不同。
data倾向于存储组件的私有数据，properties倾向于存储外界传递到组件中的数据。