Vue 3中v-model响应式重置与组件间数据同步的最佳实践

<ProductCounter v-model="formData.productCount" />

<ProductCounter :modelValue="formData.productCount" @update:modelValue="formData.productCount = $event" />

<template>
    <p>
      <ProductCounter v-model="formData.productCount" label="产品数量" />
    </p>
    <button @click="clearUI">
      清空表单
    </button>
    <div>
      <!-- 调试显示 formData 内容 -->
      {{ JSON.stringify(formData) }}
  </div>
</template>

<script setup>
import ProductCounter from './ProductCounter.vue'
import { reactive } from 'vue'

const initialFormData = {
    productCount: 0,
    firstname: '',
    surname: '',
    phone: '',
    email: '',
    postcode: '',
    submittedOnce: false,
    errors: []
}

// 使用 reactive 创建响应式数据
let formData = reactive({ ...initialFormData });

const clearUI = () => {
    // 正确的做法：使用 Object.assign() 修改现有 reactive 对象，而不是重新赋值
    Object.assign(formData, initialFormData);
}
</script>

<template>
    <div class="form__row">
        <div class="counter__row">
            <label>{{ label }}</label>
            <div class="form__counter">
                <button :disabled="value == 0 || props.disabled" @click.prevent="value--">
                -
                </button>
                <!-- 使用 v-model.number 确保输入为数字类型 -->
                <input type="text" v-model.number="value" :disabled="props.disabled" placeholder="0"/>
                <button :disabled="props.disabled" @click.prevent="value++">
                 +
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'; // 引入 computed
const emits = defineEmits(['update:modelValue']);

const props = defineProps({
    label: {
        type: String,
        required: true
    },
    // 将 modelValue 类型定义为 Number
    modelValue: {
        type: Number,
        required: true,
        default: 0
    },
    disabled: {
        type: Boolean,
        required: false
    }
});

// 使用 computed 实现 v-model 的双向绑定
const value = computed({
  get(){
    // 从 props 获取当前值
    return props.modelValue;
  },
  set(val){
    // 当本地值改变时，通过事件通知父组件更新
    emits('update:modelValue', val);
  }
});
</script>