Vue中父传子对象并修改后回传的正确实现方式

核心原则：维护单向数据流 #

Vue的单向数据流规则要求子组件不能直接修改props，props的所有权属于父组件，子组件只负责触发修改动作，最终由父组件来更新数据，这样能避免数据流向混乱。你担心的“修改后回传父组件，Vue自动再次传给子组件”是响应式的正常表现，只要修改逻辑是由用户操作触发（而非props变化就触发），就不会造成循环问题。

方案一：通过$emit触发父组件修改（通用基础方案） #

这是最直观的实现方式，子组件将修改后的新数据通过自定义事件传递给父组件，由父组件更新自身数据。

父组件（App.vue）代码： #

<template>
  <Promtscomponent :promts="promts" @update-promts="updatePromts"></Promtscomponent>
</template>

<script>
import Promtscomponent from '../components/Promtscomponent.vue';

export default {
  components: { Promtscomponent },
  data() {
    return {
      promts: { size: 1, promts: ['simplepromt'] }
    }
  },
  methods: {
    updatePromts(newPromts) {
      // 直接更新数据，这里可以做后续操作：传给其他组件、发XHR请求等
      this.promts = { ...newPromts };
    }
  }
}
</script>

子组件（Promtscomponent.vue）代码： #

<template>
  <button @click="addNewPromt">添加新提示</button>
</template>

<script>
export default {
  props: {
    promts: {
      type: Object,
      required: true
    }
  },
  methods: {
    addNewPromt() {
      // 基于props创建新对象，避免直接修改props
      const newPromts = {
        size: this.promts.size + 1,
        promts: [...this.promts.promts, 'simplepromt2']
      };
      // 触发自定义事件，把新数据传给父组件
      this.$emit('update-promts', newPromts);
    }
  }
}
</script>

方案二：自定义v-model（简洁语法糖） #

v-model本质是props + $emit的语法糖，适合需要双向绑定的场景，代码更简洁。

父组件（App.vue）代码： #

<template>
  <Promtscomponent v-model="promts"></Promtscomponent>
</template>

<script>
import Promtscomponent from '../components/Promtscomponent.vue';

export default {
  components: { Promtscomponent },
  data() {
    return {
      promts: { size: 1, promts: ['simplepromt'] }
    }
  },
  watch: {
    promts(newVal) {
      // 数据更新时执行后续操作
      console.log('更新后的promts:', newVal);
      // 这里可以发请求、传递给其他子组件
    }
  }
}
</script>

子组件（Promtscomponent.vue）代码： #

<template>
  <button @click="addNewPromt">添加新提示</button>
</template>

<script>
export default {
  props: {
    // Vue3用modelValue，Vue2用value
    modelValue: {
      type: Object,
      required: true
    }
  },
  methods: {
    addNewPromt() {
      const newPromts = {
        size: this.modelValue.size + 1,
        promts: [...this.modelValue.promts, 'simplepromt2']
      };
      // Vue3触发update:modelValue，Vue2触发input事件
      this.$emit('update:modelValue', newPromts);
    }
  }
}
</script>

进阶场景：多组件共享数据 #

如果你的promts需要在多个组件间共享，建议用Pinia（Vue3）或Vuex（Vue2）统一管理状态，所有组件直接从状态库读取和修改数据，无需手动传递事件，更适合复杂应用。

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