Vue3+TS+组合式API开发Element Plus可复用输入组件遇问题求助

问题原因 #

• Element Plus的ElInput组件@input事件的回调参数不是原生Event对象，而是输入框的当前字符串值。你定义的handleInputChange函数参数类型为Event，直接导致类型不匹配；强行类型转换后，把字符串当作Event处理，自然取不到event.target，触发Cannot read properties of undefined (reading 'value')错误。
• 你使用:value绑定modelValue但未正确同步更新，输入时组件内部值与父组件modelValue不同步，引发字符覆盖问题。原生input的@input参数是Event对象，所以原生实现无异常，但ElInput的回调逻辑完全不同。

解决办法 #

1. 修正事件参数逻辑（基础写法） #

直接使用ElInput@input传递的字符串值，无需处理Event对象：

<template>
  <el-form-item :label="label">
    <ElInput
      :value="modelValue"
      @input="$emit('update:modelValue', $event)"
    >
      <template v-if="prepend" #prepend>Http://</template>
      <template v-if="append" #append>.com</template>
    </ElInput>
  </el-form-item>
</template>
<script setup lang="ts">
import { ElInput, ElFormItem } from "element-plus"
interface IInput {
  label: string
  modelValue: string | number // 替换any为更严谨的类型
  prepend?: boolean // 补充prepend和append的props定义
  append?: boolean
}
const { label, modelValue, prepend, append } = defineProps<IInput>()
</script>

2. 简化双向绑定（Vue3.3+推荐） #

使用defineModel语法糖替代手动处理props和emit，更简洁且不易出错：

<template>
  <el-form-item :label="label">
    <ElInput
      v-model="modelValue"
    >
      <template v-if="prepend" #prepend>Http://</template>
      <template v-if="append" #append>.com</template>
    </ElInput>
  </el-form-item>
</template>
<script setup lang="ts">
import { ElInput, ElFormItem } from "element-plus"
interface IInput {
  label: string
  modelValue: string | number
  prepend?: boolean
  append?: boolean
}
// 使用defineModel自动处理双向绑定
const modelValue = defineModel<IInput['modelValue']>()
const { label, prepend, append } = defineProps<Omit<IInput, 'modelValue'>>()
</script>

3. 字符覆盖问题说明 #

字符覆盖的核心原因是:value绑定的父组件初始值未及时更新，导致组件重新渲染时用旧值覆盖新输入内容。上述两种方法都能保证输入值与modelValue实时同步，彻底解决该问题。

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