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

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
      })
    }
  },
相关推荐
JobsandCzj6 小时前
PDF 分割工具
javascript·小程序·pdf
人民广场吃泡面6 小时前
UniApp 运行的微信小程序如何进行深度优化
微信小程序·小程序·uni-app
编程毕设6 小时前
【含文档+PPT+源码】基于微信小程序的在线考试与选课教学辅助系统
java·微信小程序·小程序
低代码布道师9 小时前
加油站小程序实战教程09显示站点信息
低代码·小程序
T-shmily11 小时前
Hbuilder X开发微信小程序:利用uni-app和uview UI框架创建项目详细步骤
微信小程序·uni-app
然后就去远行吧11 小时前
小程序 wxml 语法 —— 35 wxml 语法 -声明和绑定数据
小程序
abigale0320 小时前
前端充电 - 移动端 - 小程序登录、跳转/嵌入H5页面
前端·小程序
JefferyAnd1 天前
uniapp 微信小程序 升级 uniad插件版本号
微信小程序·小程序·uni-app
HerayChen1 天前
uniapp微信小程序vue3自定义tabbar
微信小程序·小程序·uni-app
说私域1 天前
百货店的诞生与现代商业革命:结合开源AI智能客服、AI智能名片与S2B2C商城小程序的新视角
人工智能·小程序·开源