Vue父组件过滤输入框值问题：如何正确更新子组件输入值？

问题本质 #

当输入非法字符时，清理后的值与原form.payment_number完全相同，Vue响应式系统因未检测到值变化，不会触发子组件更新，导致输入框残留非法字符。你的计数器方案通过强制子组件重渲染解决了问题，但属于临时hack，以下是Vue官方推荐的标准方案：

方案1：使用自定义v-model（推荐） #

自定义v-model是Vue处理组件双向绑定的标准方式，能更优雅地实现值同步：

修改子组件InputComponent #

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  modelValue: { type: String, default: '' },
});

const emit = defineEmits(['update:modelValue']);
const inputRef = ref(null);

// 监听modelValue变化，强制同步输入框实际值
watch(() => props.modelValue, (newVal) => {
  if (inputRef.value) {
    inputRef.value.value = newVal;
  }
});
</script>

<template>
  <input
    ref="inputRef"
    :value="modelValue"
    type="text"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

修改父组件ParentComponent #

<script setup>
const form = useForm({
  payment_number: '',
});

const cardNumberChecker = (value) => {
  const cleaned = value.toString().replace(/\D/g, '');
  const trimmed = cleaned.slice(0, 16);
  const grouped = trimmed ? trimmed.match(/.{1,4}/g).join(' ') : '';
  form.payment_number = grouped;
};
</script>

<template>
  <InputComponent
    v-model="form.payment_number"
    @update:modelValue="cardNumberChecker"
  ></InputComponent>
</template>

方案2：监听Prop同步输入框值（无需改造v-model） #

如果不想调整双向绑定方式，可在子组件中监听text Prop，主动同步输入框值：

修改子组件InputComponent #

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  text: { type: String, default: '' },
});

const emit = defineEmits(['input-trigger']);
const inputRef = ref(null);

// 监听text变化，强制覆盖输入框的非法值
watch(() => props.text, (newText) => {
  if (inputRef.value) {
    inputRef.value.value = newText;
  }
});
</script>

<template>
  <input
    ref="inputRef"
    :value="text"
    type="text"
    @input="$emit('input-trigger', $event.target.value)"
  />
</template>

父组件恢复原代码（移除计数器） #

<script setup>
const form = useForm({
  payment_number: '',
});

const cardNumberChecker = (value) => {
  const cleaned = value.toString().replace(/\D/g, '');
  const trimmed = cleaned.slice(0, 16);
  const grouped = trimmed ? trimmed.match(/.{1,4}/g).join(' ') : '';
  form.payment_number = grouped;
};
</script>

<template>
  <InputComponent
    :text="form.payment_number"
    @input-trigger="cardNumberChecker"
  ></InputComponent>
</template>

方案优势 #

两种方案均通过主动同步输入框DOM值解决问题，避免了强制组件重渲染的性能浪费，完全符合Vue的响应式设计规范。

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