佛山企业网站建设咨询,制作网站语言,凡科h5尺寸,wordpress菜单导航栏透明简介
目前文章主要介绍对页面属性值的监听以及组件属性值的监听。需要异页面监听数据#xff0c;请跳转至另一个文章介绍
为什么需要监听属性值
当需要通过一个属性变化时候#xff0c;需要计算相应的方法等。pc网站经常需要监听属性#xff0c;那么小程序应该怎么去实现…简介
目前文章主要介绍对页面属性值的监听以及组件属性值的监听。需要异页面监听数据请跳转至另一个文章介绍
为什么需要监听属性值
当需要通过一个属性变化时候需要计算相应的方法等。pc网站经常需要监听属性那么小程序应该怎么去实现
实现方法
1、首先创建公共的watch.js
export function setWatcher(page) {let data page.data;let watch page.watch;Object.keys(watch).forEach(v {let key v.split(.);let nowData data;for (let i 0; i key.length - 1; i) {nowData nowData[key[i]];}let lastKey key[key.length - 1];let watchFun watch[v].handler || watch[v];let deep watch[v].deep;observe(nowData, lastKey, watchFun, deep, page);})
}function observe(obj, key, watchFun, deep, page) {var val obj[key];if (deep val ! null typeof val object) {Object.keys(val).forEach(childKey {observe(val, childKey, watchFun, deep, page);})}Object.defineProperty(obj, key, {configurable: true,enumerable: true,set: function(newVal) {watchFun.call(page, newVal, val); val newVal;if (deep) {observe(obj, key, watchFun, deep, page);}},get: function() {return val;}})
}
module.exports {setWatcher: setWatcher
}
2、在页面引用公共的watch.js。
import { setWatcher } from ../../utils/watch;
3、初始化监听方法
setWatcher(this);//可以放进onload或者input里面等
4、写入监听方法
//page页面
watch: {val(v) {console.log(v)},count: {//监听count属性值handler(v,o) {console.log(新值v,旧值o)if(v!o){console.log(被改了)}else{console.log(没改)}},deep: true}},
//组件就调用observe方法 小结
微信小程序监听属性值非常的简单只需要调用公共的js然后监听属性值即可。大大提高开发的效率。有不足之处望指正修改一起探讨哦~
