Vue3中如何通过Props正确emit modelValue并绑定对象内部属性？

要让子组件两个输入框分别更新父组件newSettings里的optionsSkin和optionsLeg，核心是让每个输入框触发针对性的属性更新，下面是两种可行方案：

方案一：基于v-model的对象整体更新 #

这种方式沿用Vue的v-model语法糖，通过构造新对象来更新指定属性，保持响应式：

父组件代码 #

直接用v-model绑定整个newSettings对象即可，Vue会自动处理modelValue prop和update:modelValue事件：

<template>
    <ChartSettings :default="chartSettings" v-model="newSettings" />
</template>

<script>
export default {
  data() {
    return {
      newSettings: {
        optionsSkin: '',
        optionsLeg: []
      }
    }
  },
  components: {
    ChartSettings,
  },
};
</script>

子组件代码 #

给每个输入框绑定单独的处理方法，在方法里构造包含更新后属性的新对象，再emitupdate:modelValue事件：

<template>
  <q-option-group
    :options="settings.optionsSkin"
    type="radio"
    @input="updateSkin"
  />
  <q-option-group
    :options="settings.optionsLeg"
    type="checkbox"
    :toggle-indeterminate="false"
    @input="updateLeg"
  />
</template>

<script>
export default {
  props: ['modelValue', 'default'],
  data() {
    return {
      settings: this.default // 从父组件传入的default初始化选项数据
    }
  },
  methods: {
    updateSkin(value) {
      // 展开原有对象，只更新optionsSkin属性
      this.$emit('update:modelValue', {
        ...this.modelValue,
        optionsSkin: value
      })
    },
    updateLeg(value) {
      this.$emit('update:modelValue', {
        ...this.modelValue,
        optionsLeg: value
      })
    }
  }
};
</script>

方案二：自定义事件单独更新属性 #

如果不想每次都构造整个对象，可以让子组件触发不同的自定义事件，父组件直接更新对应属性：

子组件代码 #

每个输入框emit不同的事件，把对应值传出去：

<template>
  <q-option-group
    :options="settings.optionsSkin"
    type="radio"
    @input="$emit('update-skin', $event)"
  />
  <q-option-group
    :options="settings.optionsLeg"
    type="checkbox"
    :toggle-indeterminate="false"
    @input="$emit('update-leg', $event)"
  />
</template>

<script>
export default {
  props: ['default'],
  data() {
    return {
      settings: this.default
    }
  }
};
</script>

父组件代码 #

监听子组件的自定义事件，直接给newSettings的对应属性赋值：

<template>
    <ChartSettings 
      :default="chartSettings" 
      @update-skin="newSettings.optionsSkin = $event"
      @update-leg="newSettings.optionsLeg = $event"
    />
</template>

<script>
export default {
  data() {
    return {
      newSettings: {
        optionsSkin: '',
        optionsLeg: []
      }
    }
  },
  components: {
    ChartSettings,
  },
};
</script>

关键注意事项 #

• 永远不要直接修改子组件的modelValue prop，Vue是单向数据流，必须通过emit事件让父组件更新数据。
• 使用对象展开...this.modelValue能保留原有属性，只更新目标字段，确保响应式正常工作。
• 子组件里的settings需要从父组件传入的default prop初始化，不然选项数据无法正常加载。

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