VUE3 - 自定义输入以格式化电话号码。无法在父级中使用 v-model答案

【问题标题】：VUE3 - Custom Input to format phone numbers. Can't get to work with v-model in parentVUE3 - 自定义输入以格式化电话号码。无法在父级中使用 v-model
【发布时间】：2021-11-23 17:01:09
【问题描述】：

我做了这个自定义输入，它基本上接受用户输入并观察并应用一些正则表达式魔法来格式化电话号码。

<template>
    <div class="relative flex items-center w-full" style="direction: ltr">
        <span class="absolute block ml-3 pointer-events-none">+20</span>
        <input
            ref="input"
            v-model="number"
            type="text"
            class="w-full border-gray-300 py-2 pr-3 pl-10">
    </div>
</template>

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

export default {
    name: 'XPhoneInput',
    setup() {
        const number = ref('');
        
        watch(number, () => {
            number.value = number.value.replace(/[^0-9]/g, '')
                .replace(/^(\d{2})?(\d{4})?(\d{4})?/g, '$1 $2 $3')
                .substr(0, 12);
        });
        
        return {number};
    }
};
</script>

这是父标签中的标签

<x-phone-input v-model="form.phone" />

而且我在使其与父母的 v-model 一起工作时遇到了麻烦。我在 vue2 中做了一些基本输入，其中子组件将值作为道具获取并发出更新事件，并且当时有效，但我无法让它在这里工作。或者我想我只是很困惑如何让它与观察者一起工作。我尝试了一些传递值和发射事件的组合。但对我没有任何帮助，我们将不胜感激。

【问题讨论】：

它的工作原理是一样的：你把它作为一个道具来获取，并在它改变时发送事件。您能否将您尝试过的内容包括在内，以便我们看看是否有问题？
尝试粘贴代码，但未格式化。截图而不是prnt.sc/20numq2
你说它发出update:modelValue，但你只是发出update。这可能是问题
哦，主啊，就是这样，非常感谢，在我做的所有谷歌搜索中，我没有看到它引用了道具名称，所以我只是假设发射是一个标志。非常感谢。

标签： javascript vue.js vuejs3

【解决方案1】：

Sami Kuhmonen 指出我做错了什么，即没有用 emit 声明道具名称这是工作代码

export default {
    name: 'XPhoneInput',
    props: ['modelValue'], //added the prop
    emits: ['update:modelValue'], //component emits the updated prop
    setup(props, { emit }) {
        const number = ref('');
        
        watch(number, () => {
            number.value = number.value.replace(/[^0-9]/g, '')
                .replace(/^(\d{2})?(\d{4})?(\d{4})?/g, '$1 $2 $3')
                .substr(0, 12);
            
            emit('update:modelValue', number.value); //here's what i did wrong, didn't add the prop name to the event name. adding it fixed it. this works
        });
        
        return {number};
    }
};

【讨论】：