vue组件props属性监听不到值变化

ゝ一世哀愁。 2021-09-25 00:14 1310阅读 0赞

在写项目时遇到一个问题，父组件传到子组件的prop，在子组件监听不到变化，

遂查看vue文档，得知watch有一种深度监听的方法。

阅读vue文档如下代码。=》

var vm = new Vue({
      data: {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: {
          f: {
            g: 5
          }
        }
      },
      watch: {
        a: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
        c: {
          handler: function (val, oldVal) { /* ... */ },
          deep: true
        },
        // 该回调将会在侦听开始之后被立即调用
        d: {
          handler: 'someMethod',
          immediate: true
        },
        // 你可以传入回调数组，它们会被逐一调用
        e: [
          'handle1',
          function handle2 (val, oldVal) { /* ... */ },
          {
            handler: function handle3 (val, oldVal) { /* ... */ },
            /* ... */
          }
        ],
        // watch vm.e.f's value: {g: 5}
        'e.f': function (val, oldVal) { /* ... */ }
      }
    })
    vm.a = 2 // => new: 2, old: 1

这时就可以监听到对象内部的属性变化了。

疑惑，项目中单层的对象，没有嵌套的对象，居然也监听不到变化。

踩坑的一天。

发表评论取消回复

表情：

评论列表（有 0 条评论，1310人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中监听属性的变化

在Vue中有属性typeId 当属性变化的时候执行函数 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

小灰灰/ 2023年05月31日 03:24/ 0 赞/ 181 阅读

相关【vue】Vue 组件 Props 类型及默认值

> `前言` 转载：[https://www.cnblogs.com/Rosicky-707/p/11543806.html][https_www.cnblogs.com_R

﹏ヽ暗。殇╰゛Y/ 2022年11月22日 12:43/ 0 赞/ 136 阅读

相关 Vue如何监听数组的变化？

故心故心故心故心小故冲啊 -------------------- 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 Vue如何

淡淡的烟草味﹌/ 2022年10月31日 04:09/ 0 赞/ 209 阅读

相关 vue组件属性（props）及私有数据data

vue组件中，props是公有属性，主要对外，相当于类里面的get、set方法操作的属性；data是私有数据，主要供组件内部访问。 vue作为一种前端开发框架，组件是其中的主

短命女/ 2022年10月13日 15:47/ 0 赞/ 210 阅读

相关监听 html dom 变化,js怎么监听元素属性变化

我觉得MutationObserver可以用啊，正常情况下，这个等待DOM操作结束再执行的异步回调没什么问题吧。什么业务实时性要那么高啊？一般一个事件里面同步的不会有同个属性

梦里梦外;/ 2022年10月06日 10:53/ 0 赞/ 261 阅读

相关【Vue】—props属性

【Vue】—props属性 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

谁借莪１个温暖的怀抱￠/ 2022年09月03日 14:29/ 0 赞/ 197 阅读

相关十七、Component 组件props 属性设置

Component 组件props 属性设置所谓组件就是自定义一个标签，设置标签里面的属性。 pro

た入场券/ 2022年05月03日 07:57/ 0 赞/ 430 阅读

相关 vue组件props属性监听不到值变化

在写项目时遇到一个问题，父组件传到子组件的prop，在子组件监听不到变化，遂查看vue文档，得知watch有一种深度监听的方法。阅读vue文档如下代码。=》

ゝ一世哀愁。/ 2021年09月25日 00:14/ 0 赞/ 1311 阅读

相关 vue组件封装—单属性非props的应用

功能： 1，支持显示快捷选择时间跨度， 2，支持自定义初始值和重置时的值 3，支持换行展示 4，支持自定label 5，支持是否开启快捷选择功能基于iv

待我称王封你为后i/ 2021年09月17日 02:58/ 0 赞/ 384 阅读

相关 vue组件（二）--prop传递数据

[组件组合][Link 1] 组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给

曾经终败给现在/ 2021年09月14日 12:52/ 0 赞/ 844 阅读