在 Vue 2.x 版本中,使用 watch 监听父组件传递的 props 可能会出现失效的情况。这是因为在 Vue 2.x 中,对 props 进行单向数据流处理,父组件传递给子组件的 props 是只读的,在子组件中不能直接修改 props 的值。

如果你需要监听 props 值的变化,可以使用一个计算属性来实现。计算属性会自动监听 props 对象的变化,并在依赖的 props 发生变化时触发相应逻辑。

以下是一个简单的示例:

props: {
  count: {
    type: Number,
    default: 0
  }
},
computed: {
  countWatcher: function() {
    // 在计算属性中可以监听到 props.count 的变化
    return this.count;
  }
},
watch: {
  countWatcher: function(newValue, oldValue) {
    // 监听 countWatcher 的变化
    console.log("props.count 的值已变为:" + newValue);
  }
}

在上面的示例中,我们定义了一个 count 属性,并在计算属性 countWatcher 中返回 props.count 的值。然后通过 watch 监听 countWatcher 的变化,以捕捉到 props.count 的变化。

请注意,使用计算属性来监听 props 的变化是一种常见的方式,但并不适用于所有情况。如果你需要在 props 变化时执行更复杂的逻辑,或者需要监听数组或对象的变化,你可能需要使用深度监听、立即执行等选项。详细信息可以参考 Vue 的官方文档中关于计算属性和 watch 的部分。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐