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

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」

定义 data 数据

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

Component({

  data: {
      count: 0
  }
})

---

定义 methods 方法

• 在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中

• 自定义方法建议用 _ 开头，自定义方法和事件函数可以作

  Component({
    methods: {
      addCount(){
        this.setData({
          count: this.data.count + 1
        })
      },
  
      _showCount(){
        wx.showToast({
          title: "count值为：" + this.data.count,
          icon: "none"
        })
      }
    }
  })
  

---

定义 properties 属性

• 在小程序组件中，properties 是组件的对外属性，用来接收外界传递组件中的数据
• 简化定义属性的方式，不需要指定属性默认值时，可以用简化方式
• 完整定义属性的方式，当需要指定属性默认值时，可以用完整方式

Component({
  properties: {
      //简化定义属性的方式
      max: Number
      
      //完整定义属性的方式
      max: {          
        type: Number, //属性值的数据类型
        value: 10     //属性默认值
      },
  }
})

---

data 和 properties 的区别

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

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

---

使用 setData 修改 properties 的值

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

Component({
  properties: {
    max: {          
      type: Number, 
      value: 10   
    }
  },
  methods: {
    addCount(){
      this.setData({
        max: this.properties.max + 1
      })
    }
  }
})

---

综合示例

组件页面结构

<view>count的值为： {{count}}</view>
<button bindtap="addCount"> +1 </button>
<view>max的值为： {{max}}</view>

组件数据结构

Component({
    
  //properties 属性
  properties: {
    max: {          
      type: Number, 
      value: 10     
    },
  },
  
  //data 数据
  data: {
    count:0
  },

  //methods 方法
  methods: {
    addCount(){
      this.setData({
        count: this.data.count + 1,
        max: this.properties.max + 1
      }),
      this._showCount()
    },

    _showCount(){
      wx.showToast({
        title: "count的值为：" + this.data.count,
        icon: "none"
      })
    }
  }
})

组件的调用

<my-test> </my-test>