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

_处女座程序员的日常2024-08-04 11:53

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

observers: {
    'num': function (val) {
      console.log(val,"父组件的值发生改变");
      this.getArticle(val)//此方法为处理子组件中内容变化的方法
    },
      'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  },