Componentes personalizados del programa WeChat Mini: datos, métodos, propiedades

datos

En los componentes personalizados, los datos se almacenan en el nodo de datos

data: {
    count:0
  }

método

Los controladores de eventos y los métodos personalizados se definen en el nodo de métodos

<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'
      })
    }
  }

Entre ellos, addCount es una función de procesamiento de eventos, _showCount es un método personalizado y se recomienda nombrar el método personalizado comenzando con _

Atributos

Las propiedades son las propiedades externas del componente, que se utilizan para recibir los datos pasados ​​al componente desde el mundo exterior.

Las propiedades se pueden definir de dos maneras:

Versión simplificada:

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

versión completa:

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

Para la interfaz externa del componente personalizado al que se hace referencia, se pueden proporcionar valores de atributo

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

La diferencia entre datos y propiedades.

En los componentes, los datos y las propiedades se usan de la misma manera, ambos son de lectura y escritura, la diferencia es que

• data tiende a almacenar datos privados de componentes
• Las propiedades tienden a almacenar datos pasados ​​a los componentes desde el mundo exterior.

oyente de datos

El detector de datos se usa para monitorear los cambios de los datos, para hacer algunas cosas, el detector de datos necesita declarar el nodo de observadores.

Ir directamente al ejemplo

<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
      })
    }
  }