Vue.js 3组合式API：如何修改组件Prop并通知子组件更新？

开发者阿泽

2026-8-20

解决Vue3组合式API中子组件无法感知Prop变化的问题

问题根源

你子组件里的open是独立的ref，仅在组件初始化时复制了props.open的初始值。当父组件的finished更新后，子组件的open ref不会自动同步props.open的新值，因此无法感知变化。

解决方案

方案1：直接使用Props（最简洁）

Props本身是响应式的，无需额外定义本地ref，直接在模板和脚本中使用props.open即可实时响应父组件的变化：

修改后的Child.vue

<template>
    <div v-if="open">Dies ist ein Test.</div>
</template>
  
<script setup>
// 定义Props后直接使用
const props = defineProps(['open'])

// 脚本中需要使用时，直接调用props.open
// console.log(props.open)
</script>

方案2：用Watch监听Props变化同步到本地Ref

如果子组件需要维护独立的本地状态（比如要在子组件内修改这个值），可以通过watch监听props.open的变化，同步到本地ref：

修改后的Child.vue

<template>
    <div v-if="open">Dies ist ein Test.</div>
</template>
  
<script setup>
import { ref, watch } from 'vue'

const props = defineProps(['open'])

const open = ref(props.open)

// 监听props.open的变化，同步到本地ref
watch(
  () => props.open,
  (newValue) => {
    open.value = newValue
  },
  { immediate: true } // 可选：初始化时同步一次，避免初始值不一致
)
</script>

方案3：用Computed映射Props（推荐用于只读场景）

如果只是需要基于Props做响应式映射，使用computed更符合Vue的响应式设计，依赖关系更清晰：

修改后的Child.vue

<template>
    <div v-if="open">Dies ist ein Test.</div>
</template>
  
<script setup>
import { computed } from 'vue'

const props = defineProps(['open'])

// 用computed创建响应式映射
const open = computed(() => props.open)
</script>