封装vue-tel-input组件在Vue3+TS环境下无法输入的问题求助

问题原因 #

你封装组件时对vue-tel-input的input事件处理错误：该组件的input事件返回的是直接处理后的电话号码字符串，而非标准DOM输入事件对象，所以$event.target.value会是undefined，导致无法正确更新父组件的绑定值。同时在TypeScript环境下未明确Props类型，也可能引发隐性类型校验问题。

修复后的封装组件代码 #

修改components/NPMPackages/VueTelInput/Index.vue：

<script setup lang="ts">
import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

// 明确Props与Emits的类型，符合TS规范
const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()
</script>
<template>
  <VueTelInput
    :value="modelValue"
    <!-- 直接使用事件返回的电话号码值，而非DOM事件对象 -->
    @input="$emit('update:modelValue', $event)"
  />
</template>

验证说明 #

修改后，父组件App.vue的原有代码无需改动即可正常工作。此时vue-tel-input触发input事件时，会将处理后的电话号码直接传递给父组件的phone变量，输入框即可正常输入和显示内容。

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