微信小程序 自定义组件-数据、方法、属性

数据

在自定义组件中，数据都存放到data节点中

data: {
    count:0
  }

方法

事件处理函数和自定义方法均定义到methods节点中

<button bindtap="addCount">点击</button>

methods: {
    addCount(){
      this.setData({
        count:this.data.count +1
      })
    this._showCount()
    },
    _showCount(){
      wx.showToast({
        title: 'title'+this.data.count,
        icon:'none'
      })
    }
  }

其中，addCount为事件处理函数，_showCount为自定义方法，建议自定义方法以_开头进行命名

属性

properies是组件的对外属性，用来接收外界给组件传递的数据

定义属性可以有两种方式：

简化版：

properties: {
    min:Number   //简化定义属性，不需要指定默认值
  }

完整版：

properties: {
    min:{
      type:Number,//属性值的数据类型
      value:5   //默认值
    }
  }

对于引用的自定义组件的外界界面，可以提供属性值

<my-test2 min="6"></my-test2>

data和properties的区别

在组件中，data和properties用法相同，都是可读可写的，不同点在于

• data趋向于存储组件的私有数据
• properties趋向于存储外界传递到组件的数据

数据监听器

数据监听器用于监听数据的变化，从来来做一些事情，数据监听器需要声明observers节点

直接上例子

<button bindtap="addNumber1">number1增加1</button>
<button bindtap="addNumber2">number2增加1</button>
<view>
n1:{
   
   {n1}}+n2:{
   
   {n2}}={
   
   {sum}}
</view>

addNumber1(){
      this.setData({
        n1:this.data.n1+1
      })
    },
    addNumber2(){
      this.setData({
        n2:this.data.n2+1
      })
    }
  }

observers:{
    'n1,n2':function(n1new,n2new){
      this.setData({
        sum:n1new+n2new
      })
    }
  }