VueJS如何实现子组件编辑值同步到父组件列表对象？

首先得明确Vue的核心原则之一：单向数据流。prop是父组件传递给子组件的，子组件只能读取不能直接修改——这就是你看到警告的原因。而如果把prop赋值给子组件的data，那只是创建了一份本地副本，修改副本自然不会同步回父组件的原对象。

接下来给你两种可行的解决方案，按需选择：

方案一：利用对象引用直接同步（简单快捷） #

因为你传递的shortcut是一个对象（引用类型），如果父组件把整个对象传给子组件，而不是解构出action单独传递，那么子组件修改对象的属性时，会直接同步到父组件的原对象（因为引用指向同一个内存地址），而且不会触发Vue的警告（我们没有修改prop本身的引用，只是修改了它的属性）。

修改后的代码如下：

父组件（shortcuts） #

Vue.component("shortcuts", {
  data: function () {
    return { shortcuts: [] }
  },
  methods: {
    add: function() {
      this.shortcuts.push({ action: "" })
    },
  },
  template: `
    <div>
      <shortcut-entry 
        v-for="(shortcut, index) in shortcuts" 
        :key="index" 
        :shortcut="shortcut" 
        @remove="shortcuts.splice(index, 1)"
      ></shortcut-entry>
      <br>
      <button @click="add">Add</button>
    </div>
  `
})

子组件（shortcut-entry） #

Vue.component("shortcut-entry", {
  methods: {
    clearParams: function() {
      this.shortcut.params = {} // 如果有params字段，同样可以这样修改
    },
    remove: function() {
      this.$emit("remove")
    }
  },
  props: {
    shortcut: Object, // 接收整个对象
  },
  template: `
    <div>
      <input type="text" v-model="shortcut.action">
      <button @click="remove">Remove</button>
    </div>
  `
})

这个方法适合简单场景，代码量少，但要注意：子组件直接修改了父组件的状态，在复杂项目中可能会让状态追踪变得困难。

方案二：通过自定义事件实现单向数据流（最佳实践） #

更符合Vue设计理念的做法是：子组件不直接修改父组件状态，而是通过触发自定义事件通知父组件，由父组件自己更新状态。

修改后的代码如下：

子组件（shortcut-entry） #

Vue.component("shortcut-entry", {
  methods: {
    clearParams: function() {
      this.$emit('update:params', {}) // 同样用事件通知父组件更新params
    },
    remove: function() {
      this.$emit("remove")
    }
  },
  props: {
    action: String, // 依然单独接收action
  },
  template: `
    <div>
      <input 
        type="text" 
        :value="action" 
        @input="$emit('update:action', $event.target.value)"
      >
      <button @click="remove">Remove</button>
    </div>
  `
})

父组件（shortcuts） #

我们可以直接监听子组件的update:action事件，或者用Vue的v-model语法糖简化代码：

Vue.component("shortcuts", {
  data: function () {
    return { shortcuts: [] }
  },
  methods: {
    add: function() {
      this.shortcuts.push({ action: "" })
    },
  },
  template: `
    <div>
      <shortcut-entry 
        v-for="(shortcut, index) in shortcuts" 
        :key="index" 
        v-model:action="shortcut.action" <!-- 用v-model语法糖简化 -->
        @remove="shortcuts.splice(index, 1)"
      ></shortcut-entry>
      <br>
      <button @click="add">Add</button>
    </div>
  `
})

Vue会自动把v-model:action="shortcut.action"解析成：

• :action="shortcut.action"（传递prop）
• @update:action="shortcut.action = $event"（监听事件并更新状态）

这种方法让状态流动更清晰，父组件完全掌控自己的状态，子组件只负责触发事件，在复杂项目中更容易维护和调试。

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