问题

在使用Vue3的props进行父子组件通信时，父组件更新了props，却没有反映在子组件中。例如：
父组件：

<template>
//...
<Child :str="str.value" />
//...
</template>
<script setup>
//...
const str = ref('')
//...
</script>

子组件：

<script setup>
//...
const props = defineProps(['str'])
//...
</script>

解决方法

看了网上很多解决方案，有说用onUpdate的，有说用watch的，有说用computed的，还有用VueX的，但都没有用或太麻烦。最终在Stack Overflow的一个问题的角落里找到了原因：参考这里的最后一条回复。

其实原因是父组件初始化时str的值为空字符串，子组件加载时其prop值就会为Undefine，这种情况下子组件的值就不会随父组件的变化而变化。只需要让父组件初始化时str的值不为空字符串即可。如const str = ref('a')。