Applet custom components - data, methods, and properties

1. In applet components , Private data for component template rendering , Need to define to data node , Examples are as follows ：

 // stay js file 
data: {
        count:0
    },

2. In applet components , Event handling functions and custom methods need to be defined to methods In the node , The example code is as follows ：

// Components js file  
methods: {
        addCount(){
            this.setData({
                count:this.data.count+1
            })
            console.log(this.data.count)
            this._showCount()
        }, 
        _showCount(){
            wx.showToast({
              title: 'count The value of is ：'+this.data.count,
              icon:'none'
            })
        }
       
    }

// Components wxml file 
<button bindtap="addCount" type="warn"> Click on </button>

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

 3.properties attribute

In applet components ,properties Is the external attribute of the component , It is used to receive the data transferred from the outside to the component , The example code is as follows ：（ send count The maximum value is 10）

 properties: {
        max:{// How to fully define attributes , It is recommended to use this way 
            type:Number,// The data type of the attribute value 
            value:10// Property defaults 
        },
        //max:Number// Simplify how attributes are defined 【 When there is no need to specify the default value of the attribute 、 Simplified methods can be used 】
    },

// The page that references the component 
<test1 max="10"></test1>

4.data and properties The difference between

In the components of the applet ,properties Properties and data The usage of data is the same , They are all Can read but write Of , It's just ：

• data Prefer to store private data of components
• properties It is more inclined to store values passed from the outside to components

 showInfo(){
            console.log(this.data)//{count: 1, max: 10}
            console.log(this.properties)//{count: 1, max: 10}
// The result is true, Prove that the two are essentially the same 
            console.log(this.data === this.properties)//true
        }

5. use setData modify properties Value

because data Data and properties Attributes are essentially the same , therefore properties Property can also be used for page rendering , Or use setData by properties Property assignment in

// In the component's js In file  methods In the method 
 addMax(){
            this.setData({
                max:this.properties.max+1
            })

// In the component's wxml
<view>max The attribute value ：{
   {max}}</view>
<button bindtap="addMax" type="primary">  Click on </button>

 

Code run results ：