VueJS中如何自动同步子组件多属性变更至父组件列表？

你这个场景我之前也碰到过——既要保持props的显式声明（不想把所有属性塞到一个对象里），又不想为每个属性写一堆重复的事件处理代码，还要避开Vue的「Avoid mutating a prop directly」警告，确实挺头疼的。下面两个方案既能满足你的需求，又符合Vue的单向数据流设计原则：

方案一：为每个Prop创建计算属性（手动但清晰） #

对于shortcut-entry组件里的每个需要双向绑定的prop，我们可以用计算属性来封装：get方法返回prop的值，set方法触发对应的更新事件。然后把模板里的v-model绑定到这些计算属性上，而不是直接绑定props。

这样既遵守了Vue的单向数据流规则，又能自动把修改同步回父组件，同时保留了props的显式声明。

示例代码：

Vue.component("shortcut-entry", {
  props: {
    mod_ctrl: Boolean,
    mod_alt: Boolean,
    mod_shift: Boolean,
    keypress: String,
    action: String
  },
  computed: {
    localModCtrl: {
      get() {
        return this.mod_ctrl;
      },
      set(value) {
        this.$emit("update:mod_ctrl", value);
      }
    },
    localModAlt: {
      get() {
        return this.mod_alt;
      },
      set(value) {
        this.$emit("update:mod_alt", value);
      }
    },
    localModShift: {
      get() {
        return this.mod_shift;
      },
      set(value) {
        this.$emit("update:mod_shift", value);
      }
    },
    localKeypress: {
      get() {
        return this.keypress;
      },
      set(value) {
        this.$emit("update:keypress", value);
      }
    },
    localAction: {
      get() {
        return this.action;
      },
      set(value) {
        this.$emit("update:action", value);
      }
    }
  },
  template: `
    <div>
      <input type="checkbox" v-model="localModCtrl"> Ctrl
      <input type="checkbox" v-model="localModAlt"> Alt
      <input type="checkbox" v-model="localModShift"> Shift
      <input type="text" v-model="localKeypress" placeholder="按键">
      <input type="text" v-model="localAction" placeholder="动作">
      <button @click="$emit('remove')">删除</button>
    </div>
  `
});

然后在父组件shortcuts里，用.sync修饰符绑定每个单独的prop，自动处理更新事件：

Vue.component("shortcuts", {
  props: { shortcuts: Array },
  template: `
    <div>
      <shortcut-entry 
        v-for="(shortcut, index) in shortcuts" 
        :key="index"
        :mod_ctrl.sync="shortcut.mod_ctrl"
        :mod_alt.sync="shortcut.mod_alt"
        :mod_shift.sync="shortcut.mod_shift"
        :keypress.sync="shortcut.keypress"
        :action.sync="shortcut.action"
        @remove="shortcuts.splice(index, 1)"
      ></shortcut-entry>
      <button @click="shortcuts.push({})">添加快捷键</button>
    </div>
  `
});

当子组件的计算属性被修改时，会自动触发update:*事件，父组件通过.sync自动更新对应的数组元素属性，完全避免了直接修改props的警告。

方案二：用Mixin自动生成同步逻辑（减少重复代码） #

如果shortcut-entry有很多props，手动写计算属性会很繁琐。这时可以用Vue的Mixin来自动为指定的props生成计算属性和对应的emit逻辑：

首先创建一个复用的mixin：

const syncPropsMixin = (propsToSync) => {
  const computed = {};
  propsToSync.forEach(propName => {
    // 把下划线命名的prop转为驼峰式本地属性名，比如mod_ctrl → localModCtrl
    const localName = 'local' + propName.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
    computed[localName] = {
      get() {
        return this[propName];
      },
      set(value) {
        this.$emit(`update:${propName}`, value);
      }
    };
  });
  return { computed };
};

然后在shortcut-entry组件里引入这个mixin，传入需要同步的props列表即可：

Vue.component("shortcut-entry", {
  props: {
    mod_ctrl: Boolean,
    mod_alt: Boolean,
    mod_shift: Boolean,
    keypress: String,
    action: String
  },
  mixins: [syncPropsMixin(['mod_ctrl', 'mod_alt', 'mod_shift', 'keypress', 'action'])],
  template: `
    <div>
      <input type="checkbox" v-model="localModCtrl"> Ctrl
      <input type="checkbox" v-model="localModAlt"> Alt
      <input type="checkbox" v-model="localModShift"> Shift
      <input type="text" v-model="localKeypress" placeholder="按键">
      <input type="text" v-model="localAction" placeholder="动作">
      <button @click="$emit('remove')">删除</button>
    </div>
  `
});

父组件的用法和方案一完全一致。这个mixin会帮你自动生成所有需要的计算属性，大大减少重复代码，同时依然保持props的显式声明。

为什么不直接修改Props？ #

Vue的「Avoid mutating a prop directly」警告是有设计考量的：props是单向数据流的载体，父组件传递给子组件，子组件直接修改会导致数据流向混乱，后续调试会非常困难。用计算属性+$emit的方式，保持了数据流的清晰：子组件只负责触发更新事件，父组件负责修改数据，完全符合Vue的设计原则。

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