父子组件双向绑定问题：子组件无法同步格式化后的值

问题场景 #

在Vue父子组件间实现手机号双向绑定，子组件phoneInput负责接收手机号、格式化后传递给父组件。仅输入数字时正常，但输入非数字内容（如64786A）时，父组件能获取到正确的格式化值，子组件却仍显示包含非数字的内容（如647-86A），需要让子组件同步显示formatPhoneNumber()返回的格式化结果。

原父组件代码 #

<phoneInput v-model="phone" :error="phoneError"/> {{ phone }}

原子组件代码 #

<script>
import { formatPhoneNumber } from "./common_functions.js";

export default {
    props: ["modelValue", "error"],
    emits: ["update:modelValue"],

    watch: {
        error: function (val) {
            this.passedPhoneError = val;
            this.inputEntered = false;
        },
    },

    data() {
        return {
            passedPhoneError: null,
            inputEntered: null,
        };
    },

    computed: {
        value: {
            get() {
                return this.modelValue;
            },
            set(value) {
                this.inputEntered = true;
                const newval = formatPhoneNumber(value);  // 移除非数字字符并格式化为'647-666-8765'
                console.log(newval);
                this.$emit("update:modelValue", newval);
            },
        },

        phoneError() {
            return this.passedPhoneError && !this.inputEntered;
        },
    },
};
</script>

<template>
    <v-text-field label="Phone*" :error="phoneError" v-model="value" />
</template>

问题原因 #

原代码中，计算属性value的set方法仅通过$emit通知父组件更新modelValue，但子组件输入框的显示依赖get方法返回的modelValue。由于Vue单向数据流特性，父组件更新modelValue后才会同步到子组件，这个过程存在延迟，导致输入框暂时保留用户输入的原始非数字内容，出现显示不一致。

解决方案 #

改用本地数据变量绑定输入框，手动处理输入逻辑，即时更新输入框显示的格式化值，同时同步父组件：

修改后的子组件代码 #

<script>
import { formatPhoneNumber } from "./common_functions.js";

export default {
    props: ["modelValue", "error"],
    emits: ["update:modelValue"],

    watch: {
        error(val) {
            this.passedPhoneError = val;
            this.inputEntered = false;
        },
        // 监听父组件modelValue变化，同步到本地输入值
        modelValue(newVal) {
            this.localValue = newVal;
        }
    },

    data() {
        return {
            passedPhoneError: null,
            inputEntered: null,
            localValue: this.modelValue // 本地变量绑定输入框
        };
    },

    computed: {
        phoneError() {
            return this.passedPhoneError && !this.inputEntered;
        },
    },

    methods: {
        handleInput(value) {
            this.inputEntered = true;
            const formattedVal = formatPhoneNumber(value);
            // 即时更新输入框显示的格式化值
            this.localValue = formattedVal;
            // 通知父组件更新绑定值
            this.$emit("update:modelValue", formattedVal);
        }
    }
};
</script>

<template>
    <v-text-field label="Phone*" :error="phoneError" :value="localValue" @input="handleInput" />
</template>

说明 #

1. 使用localValue本地变量绑定输入框的value，避免计算属性的同步延迟问题；
2. 通过@input事件手动处理输入，格式化后立即更新localValue，让输入框即时显示正确格式；
3. 监听modelValue确保父组件主动修改绑定值时（如表单重置），子组件输入框能同步更新。

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