[vuejs/vue]父子组件绑定的 v-model 值在子组件中使用watch监听失败

2025-10-29 364 views
7
版本

2.6.10

复制链接

codesandbox.io

重现步骤

等待三即可秒监听到子组件的值应该会改变

预期是什么?

子组件中的值变成了我经常改变的同事在页面上的显示

到底发生了什么?

子组件的值未发生改变

如果不行可以请给出替代方案谢谢

回答

5

快解决啊大佬们

8

你的代码进行了简单的修改,解决了子组件值没有发生改变的问题。 https://codesandbox.io/s/icy-dream-61b80?file=/src/components/HelloWorld.vue 问题点有:父组件使用v-model绑定的值,在子组件中默认是值,并且需要在props中定义值,然后监听值的值的变化。

重新使用model自定义v-model绑定的值修改了下: https://codesandbox.io/s/amazing-khayyam-28zqf?file=/src/components/HelloWorld.vue

重新使用简化的方式写了一份,提供参考:https: //codesandbox.io/s/zealous-visvesvaraya-l7sw8? file=/src/components/HelloWorld.vue

4

v-model 只是绑定了父组件某个值,但并没有赋予子组件写入成 :value="" 然后在子组件中监听 value vue 可换成任意,只是一个 key