内容简介:问题在项目中遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性的时候,发现子组件使用deep watch都不能监听到属性的变化。今天终于在网上找到了答案,在这里把方法记录下来。参考网址解决
问题
在项目中遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性的时候,发现子组件使用deep watch都不能监听到属性的变化。今天终于在网上找到了答案,在这里把方法记录下来。参考网址 https://blog.csdn.net/oLianyo...
解决
为啥会出现这种问题?受ES5的限制,Vue.js不能检测到对象属性的添加或删除。请参照 https://v1-cn.vuejs.org/guide...
解决方法
- 通过vue的this.$set(object,key,value)
- 通过Object.assign()重新创建一个对象,例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
<template> <div> <p @click="fun1" style="color: blue">方式一</p> <p @click="fun2" style="color: blue">方式二</p> </div> </template> <script> export default { data () { return { p: {a: 1} } }, methods: { fun1 () { console.log('click 1111') // this.p.b = 2 // 通过点方法赋值,发现观察不到p的变化 this.$set(this.p, 'b', 2) // 第一种解决方式,可以查看日志看到已经监听到了变化 }, fun2 () { console.log('click 2222') this.p = Object.assign({}, this.p, {c: 3}) } }, watch: { p: { handler (cval, oval) { console.log('--------') console.log(cval, oval) }, deep: true } } } </script> <style> </style>
在我的项目中我引用了第一种方法。我觉得第一种方法更适合我的项目。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 论如何监听对象某个属性的变化
- Vue 中的计算属性,方法,监听器
- Vue使用watch监听一个对象中的属性
- Laravel 给生产环境添加监听事件 - SQL日志监听
- Flutter事件监听
- 初始化监听端口
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Dynamic HTML权威指南
Danny Goodman / 2009-6 / 99.80元
《Dynamic HTML权威指南(第3版)》涵盖了最新的Web规范和各种浏览器功能特性,如果您要使用HTML、XHTML、CSS、文档对象模型(DOM)和JavaScript进行开发,那么它正是您要寻找的一站式终极资源宝库。《Dynamic HTML权威指南(第3版)》为富互联网应用程序的设计者提供了全面而翔实的参考。在《Dynamic HTML权威指南(第3版)》的帮助下,无论是Interne......一起来看看 《Dynamic HTML权威指南》 这本书的介绍吧!