Vue3子组件emit数据至父组件后父组件数据不再更新问题

核心原因 #

这个问题确实和Vue3的响应式特性相关：

• 首次给formData动态添加顶层属性时，直接赋值可能无法让Vue的响应式系统正确追踪到属性变化；
• 直接修改数组内对象的属性时，若对象的响应式绑定未被正确触发，会导致视图无法感知数据更新。

修复后的代码 #

updateData(value) {
  const passData = value.daten;
  const stepName = value.stepName;

  if (this.formData[stepName]) {
    for (let i = 0; i < passData.length; i++) {
      const found = this.formData[stepName].find(
        (item) => item.question === passData[i].question
      );
      if (!found) {
        this.formData[stepName].push(passData[i]);
      } else {
        // 用$set强制触发响应式更新
        this.$set(found, 'content', passData[i].content);
      }
    }
  } else {
    // 用$set动态添加属性，确保响应式追踪
    this.$set(this.formData, stepName, [...passData]);
  }
}

关键修改点 #

• 替换var为let：避免循环中变量提升导致的逻辑异常；
• 添加变量声明：给passData和stepName加上const，防止全局变量污染；
• 使用this.$set：
  • 动态给formData添加新属性时，通过$set让Vue感知到属性新增；
  • 修改数组对象的属性时，用$set强制触发响应式更新；
• 浅拷贝数组：用[...passData]拷贝数组，避免子组件修改原数组时直接影响父组件数据。

补充：<script setup>语法适配 #

如果使用组合式API，直接用reactive定义formData即可，无需$set：

import { reactive } from 'vue';

const formData = reactive({});

const updateData = (value) => {
  const passData = value.daten;
  const stepName = value.stepName;

  if (formData[stepName]) {
    for (let i = 0; i < passData.length; i++) {
      const found = formData[stepName].find(item => item.question === passData[i].question);
      if (!found) {
        formData[stepName].push(passData[i]);
      } else {
        found.content = passData[i].content;
      }
    }
  } else {
    formData[stepName] = [...passData];
  }
}

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