VueJS父子组件Props传递异常，模态框表单无法填充求助

1. 关于{__ob__: Observer}的说明 #

这不是错误，是Vue3对响应式对象做包装后的内部标识。要查看真实数据，可使用console.log(JSON.parse(JSON.stringify(propItem)))，或者直接在Vue DevTools里查看完整的属性值。

2. 表单无法填充数据的核心修复 #

子组件的表单数据仅在初始化时赋值了一次，没有监听propItem的变化同步更新。以下是两种可行方案：

方案一：用watch监听propItem同步表单 #

在子组件中添加监听逻辑，确保propItem变化时自动更新表单：

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  propItem: {
    type: Object,
    default: () => ({})
  }
})

const form = ref({})

// 监听propItem的变化，同步到表单
watch(props.propItem, (newVal) => {
  // 深拷贝避免父子组件响应式数据关联
  form.value = JSON.parse(JSON.stringify(newVal))
}, { immediate: true, deep: true })
</script>

• immediate: true：组件初始化时立即执行一次回调，解决首次打开模态框的赋值问题
• deep: true：监听对象内部属性的变化（如果propItem是嵌套对象）
• 深拷贝是为了避免表单修改直接影响父组件的原始数据，保证父子数据隔离

方案二：用计算属性（仅适用于只读场景） #

如果表单不需要修改，可直接用计算属性映射propItem：

import { computed } from 'vue'
const form = computed(() => JSON.parse(JSON.stringify(props.propItem)))

但需要修改表单的话，优先选watch方案。

3. 额外优化建议 #

• 父组件打开模态框时，确保propItem已正确赋值为选中行的完整数据，避免传递空对象
• 关闭模态框时重置propItem，避免残留上一次的数据：

// 父组件关闭模态框的方法
const closeModal = () => {
  isModalVisible.value = false
  propItem.value = {}
}

内容的提问来源于stack exchange，提问作者Đức Trường Đặng