父组件Prop更新后，子组件基于Prop初始化的Ref未更新如何解决？

你遇到的问题核心是：本地ref仅初始化时获取了Prop的初始值，没有建立与Prop的响应式关联，所以父组件更新Prop时子组件不会同步。不用Watcher也有更优的解决方法，推荐使用带 setter 的计算属性，既遵守Vue单向数据流规则，又能自动同步父组件的Prop变化，同时支持子组件内部修改。

实现代码 #

<script setup>
import { computed } from 'vue'

// 定义接收的Prop
const props = defineProps({
  message: {
    type: String,
    default: null,
  }
})
// 定义用于通知父组件更新的事件
const emit = defineEmits(['update:message'])

// 带 setter 的计算属性
const localMessage = computed({
  // 从Prop取值，自动响应父组件的变化
  get() {
    return props.message
  },
  // 子组件修改时，通过emit通知父组件更新Prop
  set(newVal) {
    emit('update:message', newVal)
  }
})

// 子组件交互示例：点击清除message
const handleClearMessage = () => {
  localMessage.value = null
}
</script>

父组件使用方式 #

父组件可以直接用v-model:message语法糖简化事件绑定：

<template>
  <ChildComponent v-model:message="parentMessage" />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMessage = ref('Hello from parent')
</script>

为什么这比Watcher更好？ #

• 代码更简洁：不需要额外编写监听逻辑，计算属性的getter自动关联Prop的响应式变化
• 符合Vue设计理念：严格遵循单向数据流，子组件不直接修改Prop，而是通过事件通知父组件更新
• 逻辑更清晰：把Prop同步和本地修改的逻辑封装在一个计算属性中，可读性更强

如果用Watcher的话，你需要手动监听props.message来更新本地ref，同时本地修改时还要手动emit事件，代码冗余且容易出现同步遗漏的问题。

内容的提问来源于stack exchange，提问作者panthro