小程序自定义组件-数据，方法和属性

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

 //在js文件
data: {
        count:0
    },

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

//组件js文件 
methods: {
        addCount(){
            this.setData({
                count:this.data.count+1
            })
            console.log(this.data.count)
            this._showCount()
        }, 
        _showCount(){
            wx.showToast({
              title: 'count的值为：'+this.data.count,
              icon:'none'
            })
        }
       
    }

//组件wxml文件
<button bindtap="addCount" type="warn">点击</button>

<view>{
   {count}}</view>

 3.properties属性

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据，实例代码如下：（使count数值最大为10）

 properties: {
        max:{//完整定义属性的方式，建议使用这种方式
            type:Number,//属性值的数据类型
            value:10//属性默认值
        },
        //max:Number//简化定义属性的方式【不需指定属性默认值时、可以使用简化方式】
    },

//引用组件的页面
<test1 max="10"></test1>

4.data和properties的区别

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

• data更倾向于存储组件的私有数据
• properties更倾向于存储外界传递到组件中的数值

 showInfo(){
            console.log(this.data)//{count: 1, max: 10}
            console.log(this.properties)//{count: 1, max: 10}
//结果为true，证明两者在本质上是一样的
            console.log(this.data === this.properties)//true
        }

5.用setData修改properties的值

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

//在组件的js文件中 methods方法中
 addMax(){
            this.setData({
                max:this.properties.max+1
            })

//在组件的wxml
<view>max的属性值：{
   {max}}</view>
<button bindtap="addMax" type="primary"> 点击</button>

 

代码运行结果：