在 Vue 3 的项目里，把 `v-model` 直接绑到响应式对象的某个属性上，比如 `<Child v-model="form.name" />`，然后在子组件里通过 `emit('update:modelValue', newVal)` 去改值，结果父组件的 `form.name` 确实变了，但页面上依赖它的其他地方却没重新渲染。也有另一种情况：子组件里用 `props.modelValue = xxx` 直接改，控制台报错但对象属性还是变了。前者通常是因为父组件传入的是一个原始值（string、number），`v-model` 本质上展开成 `:modelValue` 加 `@update:modelValue`，而事件处理函数是 `form.name = $event`。这个赋值动作发生在父组件的渲染作用域里，按道理应该触发更新。但如果你在子组件内部把 `props.modelValue` 当作本地状态去修改，就绕过了 `emit`，父组件根本不知道有变化。这篇文章从 Vue 3 的 `v-model` 编译结果、响应式丢失、以及 `defineModel` 的介入方式几个角度，把这类“值变了视图没变”的问题拆开讲清楚。

先看一个最常见的写法：

```vue

<template>
 <Child v-model="form.name" />
 {{ form.name }}
</template>

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: 'foo' })
</script>
```

```vue

<template>
 <input :value="modelValue" @input="onInput" />
</template>

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
 emit('update:modelValue', e.target.value)
}
</script>
```

这段代码本身没问题。`form.name` 是 reactive 对象上的属性，父组件模板里 `{{ form.name }}` 会收集依赖，emit 触发的赋值也会走响应式 setter，应当更新。

真正容易出问题的是当父组件传给子组件的是一个解构后的值，或者子组件把 props 存到了本地 ref：

```js
// Child.vue 错误示范
const props = defineProps(['modelValue'])
const local = ref(props.modelValue)

watch(() => props.modelValue, v => local.value = v)
```

这样 `local` 和父组件的 `form.name` 就断了联系。子组件修改 `local.value` 不会 emit，父组件当然不更新。这是业务代码里出现“输入框能输入但外面不刷新”的典型原因，本质是把单向数据流改成了双向但只改了一半。

Vue 3.4 之后可以用 `defineModel`，它把 `modelValue` 和 `update:modelValue` 合并成一个可写的 ref：

```vue
<script setup>
const model = defineModel()
</script>

<template>
 <input v-model="model" />
</template>
```

`defineModel` 在编译阶段会生成对应的 prop 和 emit，同时返回的 ref 在写入时会自动 emit。它适合子组件只需要透传 v-model 的场景，但不适合把 prop 复制成本地状态再用 `watch` 同步，那是另一种需求。

还有一个隐蔽的坑：父组件用 `v-model` 绑定到一个 `ref` 对象的属性上，例如 `v-model="state.user.name"`，而 `state` 是 `shallowRef` 包裹的对象。`shallowRef` 只对 `.value` 整体替换做响应，内部属性变更不会触发。这种情况在从接口拿到大对象、手动转成 `shallowRef` 做性能优化时经常遇到。改成 `ref` 或 `reactive` 就能恢复，但代价是深层响应式带来的开销。

如果确实需要把父组件的 prop 当作本地状态修改，又不想破坏单向数据流，可以给子组件再加一个事件：

```vue
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function updateLocal(val) {
 // 本地操作
 emit('update:modelValue', val)
}
</script>
```

至于 `props.modelValue = xxx` 直接赋值，在开发环境会抛 warning，生产环境可能静默失败。对象类型的 prop 如果被直接改内部属性，父组件不一定能感知，取决于父组件是否用了响应式容器以及子组件是否只是持有引用。跨组件通信还是让数据流清晰一点，读用 props，写用 emit。

排查这类问题时，先看 Vue Devtools 里父组件对应属性的值有没有变，如果变了但视图没更新，检查是不是模板里用了非响应式变量（比如从 props 解构出来的普通变量）；如果值本身没变，那就是 emit 没发出去或者发出去的事件名不对。`v-model` 的参数名要和 `update:` 后面的名字严格一致，`v-model:title` 对应 `update:title`，拼错不会报错但也不会更新。

 推荐查看天气：https://www.0dtq.com/xiahuayuan/7tian.html
 推荐查看天气：https://www.0dtq.com/xiahuayuan/10tian.html
 推荐查看天气：https://www.0dtq.com/xiahuayuan/15tian.html
 推荐查看天气：https://www.0dtq.com/xiahuayuan/40tian.html
 推荐查看天气：https://www.0dtq.com/xuanhua/
 推荐查看天气：https://www.0dtq.com/xuanhua/zuotian.html
 推荐查看天气：https://www.0dtq.com/xuanhua/7tian.html
 推荐查看天气：https://www.0dtq.com/xuanhua/10tian.html
 推荐查看天气：https://www.0dtq.com/xuanhua/15tian.html
 推荐查看天气：https://www.0dtq.com/xuanhua/40tian.html
 推荐查看天气：https://www.0dtq.com/zhangbei/
 推荐查看天气：https://www.0dtq.com/zhangbei/zuotian.html
 推荐查看天气：https://www.0dtq.com/zhangbei/7tian.html
 推荐查看天气：https://www.0dtq.com/zhangbei/10tian.html
 推荐查看天气：https://www.0dtq.com/zhangbei/15tian.html
 推荐查看天气：https://www.0dtq.com/zhangbei/40tian.html
 推荐查看天气：https://www.0dtq.com/kangbao/
 推荐查看天气：https://www.0dtq.com/kangbao/zuotian.html
 推荐查看天气：https://www.0dtq.com/kangbao/7tian.html
 推荐查看天气：https://www.0dtq.com/kangbao/10tian.html
 推荐查看天气：https://www.0dtq.com/kangbao/15tian.html
 推荐查看天气：https://www.0dtq.com/kangbao/40tian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouguyuan/
 推荐查看天气：https://www.0dtq.com/zhangjiakouguyuan/zuotian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouguyuan/7tian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouguyuan/10tian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouguyuan/15tian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouguyuan/40tian.html
 推荐查看天气：https://www.0dtq.com/shangyi/
 推荐查看天气：https://www.0dtq.com/shangyi/zuotian.html
 推荐查看天气：https://www.0dtq.com/shangyi/7tian.html
 推荐查看天气：https://www.0dtq.com/shangyi/10tian.html
 推荐查看天气：https://www.0dtq.com/shangyi/15tian.html
 推荐查看天气：https://www.0dtq.com/shangyi/40tian.html
 推荐查看天气：https://www.0dtq.com/weixian/
 推荐查看天气：https://www.0dtq.com/weixian/zuotian.html
 推荐查看天气：https://www.0dtq.com/weixian/7tian.html
 推荐查看天气：https://www.0dtq.com/weixian/10tian.html
 推荐查看天气：https://www.0dtq.com/weixian/15tian.html
 推荐查看天气：https://www.0dtq.com/weixian/40tian.html
 推荐查看天气：https://www.0dtq.com/yangyuan/
 推荐查看天气：https://www.0dtq.com/yangyuan/zuotian.html
 推荐查看天气：https://www.0dtq.com/yangyuan/7tian.html
 推荐查看天气：https://www.0dtq.com/yangyuan/10tian.html
 推荐查看天气：https://www.0dtq.com/yangyuan/15tian.html
 推荐查看天气：https://www.0dtq.com/yangyuan/40tian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouhuaian/
 推荐查看天气：https://www.0dtq.com/zhangjiakouhuaian/zuotian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouhuaian/7tian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouhuaian/10tian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouhuaian/15tian.html
 推荐查看天气：https://www.0dtq.com/zhangjiakouhuaian/40tian.html
 推荐查看天气：https://www.0dtq.com/wanquan/
 推荐查看天气：https://www.0dtq.com/wanquan/zuotian.html
 推荐查看天气：https://www.0dtq.com/wanquan/7tian.html
 推荐查看天气：https://www.0dtq.com/wanquan/10tian.html
 推荐查看天气：https://www.0dtq.com/wanquan/15tian.html
 推荐查看天气：https://www.0dtq.com/wanquan/40tian.html
 推荐查看天气：https://www.0dtq.com/huailai/
 推荐查看天气：https://www.0dtq.com/huailai/zuotian.html
 推荐查看天气：https://www.0dtq.com/huailai/7tian.html
 推荐查看天气：https://www.0dtq.com/huailai/10tian.html
 推荐查看天气：https://www.0dtq.com/huailai/15tian.html
 推荐查看天气：https://www.0dtq.com/huailai/40tian.html
 推荐查看天气：https://www.0dtq.com/zhuolu/
 推荐查看天气：https://www.0dtq.com/zhuolu/zuotian.html
 推荐查看天气：https://www.0dtq.com/zhuolu/7tian.html
 推荐查看天气：https://www.0dtq.com/zhuolu/10tian.html
 推荐查看天气：https://www.0dtq.com/zhuolu/15tian.html
 推荐查看天气：https://www.0dtq.com/zhuolu/40tian.html
 推荐查看天气：https://www.0dtq.com/chicheng/
 推荐查看天气：https://www.0dtq.com/chicheng/zuotian.html
 推荐查看天气：https://www.0dtq.com/chicheng/7tian.html
 推荐查看天气：https://www.0dtq.com/chicheng/10tian.html
 推荐查看天气：https://www.0dtq.com/chicheng/15tian.html
 推荐查看天气：https://www.0dtq.com/chicheng/40tian.html
 推荐查看天气：https://www.0dtq.com/chongli/
 推荐查看天气：https://www.0dtq.com/chongli/zuotian.html
 推荐查看天气：https://www.0dtq.com/chongli/7tian.html
 推荐查看天气：https://www.0dtq.com/chongli/10tian.html
 推荐查看天气：https://www.0dtq.com/chongli/15tian.html
 推荐查看天气：https://www.0dtq.com/chongli/40tian.html
 推荐查看天气：https://www.0dtq.com/chengde/
 推荐查看天气：https://www.0dtq.com/chengde/zuotian.html
 推荐查看天气：https://www.0dtq.com/chengde/7tian.html
 推荐查看天气：https://www.0dtq.com/chengde/10tian.html
 推荐查看天气：https://www.0dtq.com/chengde/15tian.html
 推荐查看天气：https://www.0dtq.com/chengde/40tian.html
 推荐查看天气：https://www.0dtq.com/shuangluan/
 推荐查看天气：https://www.0dtq.com/shuangluan/zuotian.html
 推荐查看天气：https://www.0dtq.com/shuangluan/7tian.html
 推荐查看天气：https://www.0dtq.com/shuangluan/10tian.html
 推荐查看天气：https://www.0dtq.com/shuangluan/15tian.html
 推荐查看天气：https://www.0dtq.com/shuangluan/40tian.html
 推荐查看天气：https://www.0dtq.com/chengdexian/
 推荐查看天气：https://www.0dtq.com/chengdexian/zuotian.html
 推荐查看天气：https://www.0dtq.com/chengdexian/7tian.html
 推荐查看天气：https://www.0dtq.com/chengdexian/10tian.html
 推荐查看天气：https://www.0dtq.com/chengdexian/15tian.html
 推荐查看天气：https://www.0dtq.com/chengdexian/40tian.html
 推荐查看天气：https://www.0dtq.com/xinglong/
 推荐查看天气：https://www.0dtq.com/xinglong/zuotian.html
 推荐查看天气：https://www.0dtq.com/xinglong/7tian.html
 推荐查看天气：https://www.0dtq.com/xinglong/10tian.html
 推荐查看天气：https://www.0dtq.com/xinglong/15tian.html
 推荐查看天气：https://www.0dtq.com/xinglong/40tian.html
 推荐查看天气：https://www.0dtq.com/pingquan/
 推荐查看天气：https://www.0dtq.com/pingquan/zuotian.html
 推荐查看天气：https://www.0dtq.com/pingquan/7tian.html
 推荐查看天气：https://www.0dtq.com/pingquan/10tian.html
 推荐查看天气：https://www.0dtq.com/pingquan/15tian.html
 推荐查看天气：https://www.0dtq.com/pingquan/40tian.html
 推荐查看天气：https://www.0dtq.com/luanping/
 推荐查看天气：https://www.0dtq.com/luanping/zuotian.html
 推荐查看天气：https://www.0dtq.com/luanping/7tian.html
 推荐查看天气：https://www.0dtq.com/luanping/10tian.html
 推荐查看天气：https://www.0dtq.com/luanping/15tian.html
 推荐查看天气：https://www.0dtq.com/luanping/40tian.html
 推荐查看天气：https://www.0dtq.com/chengdelonghua/
 推荐查看天气：https://www.0dtq.com/chengdelonghua/zuotian.html
 推荐查看天气：https://www.0dtq.com/chengdelonghua/7tian.html
 推荐查看天气：https://www.0dtq.com/chengdelonghua/10tian.html
 推荐查看天气：https://www.0dtq.com/chengdelonghua/15tian.html
 推荐查看天气：https://www.0dtq.com/chengdelonghua/40tian.html
 推荐查看天气：https://www.0dtq.com/fengning/
 推荐查看天气：https://www.0dtq.com/fengning/zuotian.html
 推荐查看天气：https://www.0dtq.com/fengning/7tian.html
 推荐查看天气：https://www.0dtq.com/fengning/10tian.html
 推荐查看天气：https://www.0dtq.com/fengning/15tian.html
 推荐查看天气：https://www.0dtq.com/fengning/40tian.html
 推荐查看天气：https://www.0dtq.com/chengdekuancheng/
 推荐查看天气：https://www.0dtq.com/chengdekuancheng/zuotian.html
 推荐查看天气：https://www.0dtq.com/chengdekuancheng/7tian.html
 推荐查看天气：https://www.0dtq.com/chengdekuancheng/10tian.html
 推荐查看天气：https://www.0dtq.com/chengdekuancheng/15tian.html
 推荐查看天气：https://www.0dtq.com/chengdekuancheng/40tian.html
 推荐查看天气：https://www.0dtq.com/weichang/
 推荐查看天气：https://www.0dtq.com/weichang/zuotian.html
 推荐查看天气：https://www.0dtq.com/weichang/7tian.html
 推荐查看天气：https://www.0dtq.com/weichang/10tian.html
 推荐查看天气：https://www.0dtq.com/weichang/15tian.html
 推荐查看天气：https://www.0dtq.com/weichang/40tian.html
 推荐查看天气：https://www.0dtq.com/cangzhou/
 推荐查看天气：https://www.0dtq.com/cangzhou/zuotian.html
 推荐查看天气：https://www.0dtq.com/cangzhou/7tian.html
 推荐查看天气：https://www.0dtq.com/cangzhou/10tian.html
 推荐查看天气：https://www.0dtq.com/cangzhou/15tian.html
 推荐查看天气：https://www.0dtq.com/cangzhou/40tian.html
 推荐查看天气：https://www.0dtq.com/cangzhouxinhua/
 推荐查看天气：https://www.0dtq.com/cangzhouxinhua/zuotian.html
 推荐查看天气：https://www.0dtq.com/cangzhouxinhua/7tian.html
 推荐查看天气：https://www.0dtq.com/cangzhouxinhua/10tian.html
 推荐查看天气：https://www.0dtq.com/cangzhouxinhua/15tian.html
 推荐查看天气：https://www.0dtq.com/cangzhouxinhua/40tian.html
 推荐查看天气：https://www.0dtq.com/cangxian/
 推荐查看天气：https://www.0dtq.com/cangxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/cangxian/7tian.html
 推荐查看天气：https://www.0dtq.com/cangxian/10tian.html
 推荐查看天气：https://www.0dtq.com/cangxian/15tian.html
 推荐查看天气：https://www.0dtq.com/cangxian/40tian.html
 推荐查看天气：https://www.0dtq.com/qingxian/
 推荐查看天气：https://www.0dtq.com/qingxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/qingxian/7tian.html
 推荐查看天气：https://www.0dtq.com/qingxian/10tian.html
 推荐查看天气：https://www.0dtq.com/qingxian/15tian.html
 推荐查看天气：https://www.0dtq.com/qingxian/40tian.html
 推荐查看天气：https://www.0dtq.com/dongguang/
 推荐查看天气：https://www.0dtq.com/dongguang/zuotian.html
 推荐查看天气：https://www.0dtq.com/dongguang/7tian.html
 推荐查看天气：https://www.0dtq.com/dongguang/10tian.html
 推荐查看天气：https://www.0dtq.com/dongguang/15tian.html
 推荐查看天气：https://www.0dtq.com/dongguang/40tian.html
 推荐查看天气：https://www.0dtq.com/haixing/
 推荐查看天气：https://www.0dtq.com/haixing/zuotian.html
 推荐查看天气：https://www.0dtq.com/haixing/7tian.html
 推荐查看天气：https://www.0dtq.com/haixing/10tian.html
 推荐查看天气：https://www.0dtq.com/haixing/15tian.html
 推荐查看天气：https://www.0dtq.com/haixing/40tian.html
 推荐查看天气：https://www.0dtq.com/cangzhouyanshan/
 推荐查看天气：https://www.0dtq.com/cangzhouyanshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/cangzhouyanshan/7tian.html
 推荐查看天气：https://www.0dtq.com/cangzhouyanshan/10tian.html
 推荐查看天气：https://www.0dtq.com/cangzhouyanshan/15tian.html
 推荐查看天气：https://www.0dtq.com/cangzhouyanshan/40tian.html
 推荐查看天气：https://www.0dtq.com/suning/
 推荐查看天气：https://www.0dtq.com/suning/zuotian.html
 推荐查看天气：https://www.0dtq.com/suning/7tian.html
 推荐查看天气：https://www.0dtq.com/suning/10tian.html
 推荐查看天气：https://www.0dtq.com/suning/15tian.html
 推荐查看天气：https://www.0dtq.com/suning/40tian.html
 推荐查看天气：https://www.0dtq.com/nanpi/
 推荐查看天气：https://www.0dtq.com/nanpi/zuotian.html
 推荐查看天气：https://www.0dtq.com/nanpi/7tian.html
 推荐查看天气：https://www.0dtq.com/nanpi/10tian.html
 推荐查看天气：https://www.0dtq.com/nanpi/15tian.html
 推荐查看天气：https://www.0dtq.com/nanpi/40tian.html
 推荐查看天气：https://www.0dtq.com/wuqiao/
 推荐查看天气：https://www.0dtq.com/wuqiao/zuotian.html
 推荐查看天气：https://www.0dtq.com/wuqiao/7tian.html
 推荐查看天气：https://www.0dtq.com/wuqiao/10tian.html

在 Vue 3 的项目里，把 v-model 直接绑到响应式对象的某个属性上，比如 <Child v-model="form.name" />，然后在子组件里通过 emit('update:modelValue', newVal) 去改值，结果父组件的 form.name 确实变了，但页面上依赖它的其他地方却没重新渲染。也有另一种情况：子组件里用 props.modelValue = xxx 直接改，控制台报错但对象属性还是变了。前者通常是因为父组件传入的是一个原始值（string、number），v-model 本质上展开成 :modelValue 加 @update:modelValue，而事件处理函数是 form.name = $event。这个赋值动作发生在父组件的渲染作用域里，按道理应该触发更新。但如果你在子组件内部把 props.modelValue 当作本地状态去修改，就绕过了 emit，父组件根本不知道有变化。这篇文章从 Vue 3 的 v-model 编译结果、响应式丢失、以及 defineModel 的介入方式几个角度，把这类“值变了视图没变”的问题拆开讲清楚。

Vue 3 中 v-model 绑定对象属性时为什么不会触发父组件更新？

在 Vue 3 的项目里，把 v-model 直接绑到响应式对象的某个属性上，比如 <Child v-model="form.name" />，然后在子组件里通过 emit('update:modelValue', newVal) 去改值，结果父组件的 form.name 确实变了，但页面上依赖它的其他地方却没重新渲染。也有另一种情况：子组件里用 props.modelValue = xxx 直接

前端

客户端

Vue3中v-model绑定响应式对象属性后视图不更新，根源在于子组件将props.modelValue复制为本地ref或直接赋值，导致单向数据流断裂。可通过defineModel简化双向绑定，或严格使用emit更新。排查时需检查事件名匹配及shallowRef深层响应问题，确保数据流清晰。

代码解释

数据流

容器

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue 3 中 v-model 绑定对象属性时为什么不会触发父组件更新？-腾讯云开发者社区-腾讯云

Vue 3 中 v-model 绑定对象属性时为什么不会触发父组件更新？

Vue 3 中 v-model 绑定对象属性时为什么不会触发父组件更新？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐