联系QQ 284710375
首页 > 技术分享 > 微信小程序
收藏

微信小程序自定义组件中observers监听器使用方法2022-12-22 16:24:35

大潇博客 原创文章,转载请标明出处

我们在使用自定义组件时,在“pages”内的js文件中定义参数的值,通过wxml传递数据,在组件的“Component”内的“properties”中定义格式并接收参数,这是最基本的做法。

小程序组件传参.png

但这种做法不适用于异步请求,通过wx.request拿到的数据,无法在组件的“Component”内“properties”中用常规方法接收到参数,可以理解为:当异步拿到数据时,组件已经在小程序内完成初始化,所以此时参数变成了无效操作。


解决方法:

在自定义组件内通过observers数据监听器接收参数,observers数据监听器可以用于监听和响应任何数据字段的变化。


使用前提:

1、小程序基础库版本 2.6.1 开始支持

2、只能在自定义组件中使用,在页面中无法使用


使用方法:

1、在自定义组件的properties中的使用

此处监听父组件传过来的数据,如果发生变化,会引起该子组件数据变动,并重新渲染

Component({

properties: {

date: {

type: null,

value: new Date()

},

/*选中操作*/

selected: {

type: Array,

value: [],

//数据监听

observer(newVal, oldVal) { 

console.log("newVal", newVal);

this.getWeather(new Date()); //调用自定义函数

}

},

}

data: {}

})


2、Component内的属性(与properties同一层级)

放在这个位置,可监听当前子组件内data、props内数据的变动。" ** "为通配符,可监听所有数据的变动

Component({

options: {

styleIsolation: 'apply-shared'

},

properties: {

//定义timeTamp参数

timeTamp:{

type: String,

value: ''

},

},

/**

* 监听器

*/

observers: {

//监听timeTamp参数变动

'timeTamp': function(val) {

console.log(val)

timeTamp = val.split(",");

this.setData({

timeTampArr:timeTamp

});

this.getWeek(new Date());

}

//每次setData都触发

'**': function() {

console.log("this.data")

},

},

/**

* 组件的初始数据

*/

data: {

timeTampArr:'',

}

})


打赏

阅读排行

大家都在搜

博客维护不易,感谢你的肯定
扫码打赏,建议金额1-10元
  • 15601023311