微信小程序中Component中如何监听属性变化

1.在父组件的.json文件中引入子组件:

"usingComponents": {
    "articleList":"../../components/articleList/articleList",
  }

2.在父组件中给子组件绑定数据

<articleList num="{{number}}"></articleList>

3.子组件接受父组件传递的数据

properties:{
    num:Number,//请求列表的数量
  },
  data: {// 组件中的这个数据
    numberA: 0,
    numberB: 1,
  },
  

4.使用observers来实现子组件对于父组件的属性监听**(此处需要注意不能用箭头函数)**

observers: {
    'num': function (val) {
      console.log(val,"父组件的值发生改变");
      this.getArticle(val)//此方法为处理子组件中内容变化的方法
    },
      'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时,执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  },
微信小程序组件开发,`observe`是一个用于监听组件属性变化属性观察器。当组件属性发生变化时,`observe`会触发对应的回调函数。下面是一个示例,展示了如何在微信小程序使用`observe`: 1. 在组件的js文件定义属性和`observe`回调函数: ```javascript Component({ properties: { // 定义一个属性 text: { type: String, value: '', observer: function(newVal, oldVal) { // 监听属性变化的回调函数 console.log('属性 text 的从', oldVal, '变为', newVal); } } } }) ``` 2. 在页面的wxml文件引入组件,并绑定属性: ```html <view> <!-- 引入组件,并绑定属性 --> <my-component text="{{myText}}"></my-component> </view> ``` 3. 在页面的js文件定义属性并更新: ```javascript Page({ data: { myText: 'Hello World' }, onLoad: function() { // 延时更新属性 setTimeout(() => { this.setData({ myText: 'Hello ChitGPT' }); }, 2000); } }) ``` 在以上示例组件定义了一个名为`text`的属性,并通过`observer`属性指定了一个回调函数。当`text`属性发生变化时,回调函数将被触发,并打印出新旧属性。 在页面引入该组件时,使用`text="{{myText}}"`将页面的`myText`属性绑定到组件的`text`属性上。初始为`Hello World`。 在页面的`onLoad`生命周期函数,通过`setData`方法更新了`myText`属性为`Hello ChitGPT`,并将更新延时了2秒钟。 当属性更新时,`observer`回调函数会被触发,并打印出新旧属性。在这个例子,2秒后控制台将会输出"属性 text 的从 Hello World 变为 Hello ChitGPT"。 这样,通过使用`observe`可以监听组件属性变化,并在回调函数执行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值