Vue3组合式API中子组件Props未随父组件属性更新问题

当你从reactive对象中提取单个基本类型属性（如字符串、数字）传递给子组件时，传递的是该属性的当前值副本，而非响应式引用。Vue的响应式系统依赖对象属性的访问追踪，单独提取基本类型值会脱离原reactive对象的响应式上下文，导致子组件props无法感知父组件的属性更新。

而传递整个reactive对象时，子组件拿到的是对象的响应式引用，对象内部属性的变化会被Vue的响应式系统正常追踪，因此watch能触发。

另外你的代码里存在一个拼写错误：父组件v-model绑定的是form.country（小写c），但传递给子组件的是form.Country（大写C），这会导致父组件的选择框值变化根本不会同步到form.Country，这也是子组件没更新的原因之一，需要先修正这个拼写问题。

要传递单个属性且保持响应式，有两种常用方式：

方式1：使用toRef包装单个属性 #

toRef可以从reactive对象中提取单个属性并创建对应的响应式ref对象，传递这个ref给子组件，就能保持响应式关联。

修正后的父组件代码：

<template>
    <select v-model="form.Country"> <!-- 修正拼写，和对象属性一致 -->
      <option
        v-for="(data, idx) in countryList"
        :key="idx" <!-- 建议添加key，符合Vue规范 -->
        :value="data.name" <!-- 建议绑定value，否则option的value是文本内容 -->
      >
        {{ data.name }}
      </option>
    </select>
    
    <ChildComponent :country="toRef(form, 'Country')" />
</template>

<script setup>
import { reactive, toRef } from 'vue'
import ChildComponent from './ChildComponent.vue'

let form = reactive({
  Country: "",
  // ...other object properties
})

// 或者先解构再传递
// const Country = toRef(form, 'Country')
// 然后 <ChildComponent :country="Country" />
</script>

子组件代码：

<template>
  <div>当前选中国家：{{ country }}</div>
</template>
<script setup>
import { watch } from 'vue'

const props = defineProps({
  country: String // 明确props类型，更规范
})

watch(() => props.country, () => {
  console.log('国家属性更新了')
})
</script>

方式2：将属性单独用ref定义 #

如果该属性不需要和其他属性放在同一个reactive对象中，可以直接用ref定义，传递ref对象给子组件时，Vue会自动维护其响应式：

父组件代码：

<template>
    <select v-model="country">
      <option
        v-for="(data, idx) in countryList"
        :key="idx"
        :value="data.name"
      >
        {{ data.name }}
      </option>
    </select>
    
    <ChildComponent :country="country" />
</template>

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

const country = ref("")
// 其他属性可以单独用ref或放在reactive里
</script>

子组件代码和方式1一致，watch能正常触发。

• 如果你在子组件中直接解构defineProps的结果（如const { country } = defineProps(...)），会丢失响应式，因为解构相当于提取了当前值的副本。正确的做法是保留props对象，通过props.country访问，或者使用toRefs解构：const { country } = toRefs(defineProps(...))，这样解构出来的是响应式ref对象。
• 传递reactive对象的嵌套对象属性（如form.address.city）时，因为传递的是对象引用，所以能保持响应式，但基本类型属性必须用toRef处理。

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