当父组件更新 props 值时，Vuejs 子组件 props 不更新

Question

我有一个父组件和子组件设置，每当我将对象属性传递给子组件时，它只会获取初始值，并且在父组件发生更改时不会进一步更新，但如果我传递整个对象子组件的 prop，它会随着父组件的更新而更新。这是我的设置示例（注意：我正在使用合成 api）

在我的父组件中，我有以下设置

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

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

我的子组件就是这样

<template>
   //.....
</template>
<script setup>
   const {country} = defineProps('country')

   watch(country, ()=>{
     //...does not trigger on property change
   }
<script\>

但是如果我将完整的对象作为道具传递，例如

  <template>   
   <ChildComponent :country="form" /> 
  </template>

只要父组件中表单的属性更新，子组件中的 watch 函数就会触发

我已经浏览了 vuejs 文档，但找不到解决方案，唯一有效的方法是传递整个对象，但是当我只想使用单个属性时为什么必须传递整个对象

Answer 1

在子组件中，您应该使用计算作为道具。示例：

<template>
   //.....
</template>
<script setup>
   const props = defineProps(["country"]);
   const selectedCountry = computed(() => props.country);
<script\>

您可以在 https://vuejs.org/guide/components/props.html

阅读更多信息