Vue 3 中实现嵌套组件的 v-model 双向绑定（含复选框场景）-js教程-PHP中文网

Vue 3 中实现嵌套组件的 v-model 双向绑定（含复选框场景）

本文详解 Vue 3 中如何正确实现自定义复选框组件的 v-model 双向绑定，涵盖 modelValue prop 替代 value、update:modelValue 事件规范、底层 input 的 checked 绑定要点，以及避免重复触发和初始化状态错位的关键实践。

本文详解 vue 3 中如何正确实现自定义复选框组件的 v-model 双向绑定，涵盖 `modelvalue` prop 替代 `value`、`update:modelvalue` 事件规范、底层 input 的 `checked` 绑定要点，以及避免重复触发和初始化状态错位的关键实践。

在 Vue 3 中，v-model 不再像 Vue 2 那样默认监听 input 事件并使用 value prop，而是遵循标准化约定：使用 modelValue 作为 prop 名，并通过 update:modelValue 事件通知父组件更新。这一变化对嵌套表单组件（尤其是复选框类）的封装提出了明确要求，否则将导致绑定失效、初始状态错误或事件重复触发等问题。

✅ 正确实现 v-model 的三步核心

1. 更新 Prop 声明：用 modelValue 替代 value

在 FormCheckbox.vue 中，必须将接收绑定值的 prop 改为 modelValue，并保持类型与默认值一致：

<!-- FormCheckbox.vue -->
<script>
export default {
  props: {
    modelValue: { // ✅ 关键：改为 modelValue
      type: Array,
      default: () => []
    },
    inputValue: {
      type: String,
      required: true
    },
    // 其他 props...
  },
  computed: {
    shouldBeChecked() {
      return this.modelValue?.includes(this.inputValue) ?? false;
    }
  },
  methods: {
    updateInput(event) {
      const { checked, value } = event.target;
      const newValue = [...(this.modelValue || [])];

      if (checked) {
        if (!newValue.includes(value)) newValue.push(value);
      } else {
        const idx = newValue.indexOf(value);
        if (idx > -1) newValue.splice(idx, 1);
      }

      // ✅ 触发标准事件，而非 'input'
      this.$emit('update:modelValue', newValue);
    }
  }
};
</script>