问题
在使用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')
。