微信小程序17--（自定义组件2）

目录

一、数据监听器

二、数据监听器的基本用法

1、创建test2 components文件

2、查看是否正确渲染到页面上

3、声明三个数据（实现n1,n2自增的同时，sum也自增的功能）

4、在页面上添加按钮，并实现点击自增1的功能

5、在js文件中添加方法实现自增，但是结果并无变化

6、通过observers实现结果随n1,n2的变化而变化

三、监听对象属性的变化

1、新建一个test3 components文件

2、查看是否正确渲染到页面上

3、声明数据

4、渲染UI结构

5、定义button的事件处理函数

6、给每个button绑定事件

7、将RGB值渲染到页面上方便查看

8、监听对象

9、当某对象中需要被监听的属性太多时，为了方便，可以使用通配符**来监听对象中所有属性的变化。 

10、实现效果

---

一、数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它类似vue里面的watch监听器。

二、数据监听器的基本用法

1、创建test2 components文件

2、查看是否正确渲染到页面上

3、声明三个数据（实现n1,n2自增的同时，sum也自增的功能）

4、在页面上添加按钮，并实现点击自增1的功能

addN1(){
      this.setData({ n1:this.data.n1+1}) 
    },
    addN2(){
      this.setData({ n2:this.data.n2+1})
    }
  }

5、在js文件中添加方法实现自增，但是结果并无变化

//test2.js文件
observers:{
    // 数据监听节点，监听n1,n2的变化
    'n1,n2':function(newN1,newN2){
      // 通过监听器来计算sum的值
      this.setData({
        sum:newN1+newN2
      })
    }
  }

6、通过observers实现结果随n1,n2的变化而变化

observers 是一个用于监测和统计微信小程序访问和使用情况的工具。

三、监听对象属性的变化

数据监听器支持监听对象中单个或者多个属性的变化。

触发监听的3种情况：

• 为属性A赋值：使用setData设置this.data.对象.属性A时触发
• 为属性B赋值：使用setData设置this.data.对象.属性B时触发
• 直接为对象赋值：使用setData设置this.data.对象时触发

1、新建一个test3 components文件

2、查看是否正确渲染到页面上

3、声明数据

<!--components/test3/test3.wxml-->
<view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值{{fullColor}}
</view>
<button size="mini" type="default">R</button>
<button size="mini" type="primary">G</button>
<button size="mini" type="warn">B</button>

/* components/test3/test3.wxss */
.colorBox{
  line-height: 200rpx;
  font-size: 24rpx;
  color: white;
  text-shadow: 0rpx 0rpx 2rpx black;
  text-align: center;
}

4、渲染UI结构

5、定义button的事件处理函数

methods: {
    changeR(){//修改对象RGB上的R值
      this.setData({'rgb.r':this.data.rgb.r+5>=255?255:this.data.rgb.r+5})
    },
    changeG(){this.setData({'rgb.g':this.data.rgb.g+5>=255?255:this.data.rgb.g+5})
  },
    changeB(){this.setData({'rgb.b':this.data.rgb.b+5>=255?255:this.data.rgb.b+5})}
  }

6、给每个button绑定事件

7、将RGB值渲染到页面上方便查看

observers:{'rgb.r,rgb.g,rgb.b':function(){
    // 监听rgb对象上r,g，b三个子属性的变化
    this.setData({
      fullColor:`${r},${g},${b}`
      // 为data中的fullColor重新赋值
    })
  }
} 

8、监听对象

'rgb.**':function(obj){
    this.setData({
      fullColor:`${obj.r},${obj.g},${obj.b}`
    })
  }

9、当某对象中需要被监听的属性太多时，为了方便，可以使用通配符**来监听对象中所有属性的变化。 

10、实现效果