Vue.js父子组件数据同步问题：子组件无法获取父组件更新的file_data

1. 父组件用响应式变量存储文件数据 #

父组件上传文件后，必须把文件数据存在响应式变量里（Vue3用ref/reactive，Vue2用data），确保数据更新时子组件能感知到：

<!-- BillingView.vue (Vue3 组合式API) -->
<script setup>
import { ref } from 'vue'
const uploadedFile = ref({})

// 处理文件上传的回调
const handleFileUpload = (file) => {
  // 把选中的文件赋值给响应式变量
  uploadedFile.value = file // 这里要确保file是完整的文件对象，而非空值
}
</script>

<template>
  <input type="file" @change="handleFileUpload($event.target.files[0])" />
  <button @click="showModal = true">发送</button>
  <!-- 给子组件绑定文件数据和模态框状态 -->
  <EmailSender :file-data="uploadedFile" :visible="showModal" @close="showModal = false" />
</template>

2. 子组件通过props接收父组件的文件数据 #

子组件不要自行定义空的file_data变量，直接通过props获取父组件传递的最新数据：

<!-- EmailSender.vue (Vue3 组合式API) -->
<script setup>
const props = defineProps({
  fileData: {
    type: Object,
    default: () => ({})
  },
  visible: Boolean
})

// 发送邮件请求的函数
const sendEmail = () => {
  const req_data = {}
  // 直接使用props中的最新文件数据
  req_data['file'] = props.fileData
  // 可以先打印确认数据是否正常
  console.log('待发送文件:', req_data.file)
  // 调用后端接口逻辑
  // fetch('/api/send-email', { method: 'POST', body: req_data })
}
</script>

<template>
  <div class="modal" v-if="visible">
    <input type="email" placeholder="输入收件人邮箱" />
    <button @click="sendEmail">确认发送</button>
  </div>
</template>

3. 排查常见问题 #

• 不要把props的fileData赋值给子组件本地的非响应式变量（比如const file_data = props.fileData），否则父组件更新数据时，本地变量不会同步变化。
• 确认父组件上传文件后，uploadedFile确实被赋值了有效数据，可以在父组件中打印uploadedFile.value验证。
• 如果使用第三方UI库的模态框（如Element Plus的ElDialog），可以通过watch监听fileData的变化，确保数据更新时能及时响应：

<!-- EmailSender.vue 中添加监听 -->
<script setup>
import { watch } from 'vue'

watch(() => props.fileData, (newFile) => {
  console.log文件数据已更新:', newFile)
  // 可在此处更新子组件相关状态
}, { deep: true }) // 若文件是复杂对象，需开启深度监听
</script>

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