Select对于onChange的prop进行警告

TheRedAce2025-07-14 14:44

一、环境准备

vue + ant-design-vue

二、问题警告

Vue warn\]: Invalid prop: type check failed for prop "onChange". Expected Function, got Array at \

html 复制代码

// parent.vue
<template>
    <CustomUserSelect />
</template>

// CustomUserSelect.vue
<template>
  <Select @change="handleChange" placeholder="请选择" allowClear>
    <SelectOption value="1">1</SelectOption>
    <SelectOption value="2">2</SelectOption>
    <SelectOption value="3">3</SelectOption>
  </Select>
</template>

三、原因分析

使用CustomUserSelect并没有传入，但是控制台会出现 <CustomUserSelect id="customSelectAnthorInfo" onBlur=fn<onBlur8> onChange=fn<onChange9> 会出现一个默认的onChange和onBlur

是UI库（Ant Design Vue）的Select组件内部绑定的事件处理函数，自动绑定到是正常现象，它们用于处理组件的内部逻辑（如当内部发生值变化时触发change事件，当失焦时触发blur事件）

简单来说Select组件会在内部处理一些原生事件（如blur、focus等），并触发自定义事件（如blur、change等）。在Select组件的模板中，它的根元素可能监听了原生的blur事件，并调用内部方法，然后触发blur事件（自定义事件）

四、解决办法

其实就因为 CustomUserSelect 组件的根元素是 Select ,所以自动绑定了一个onChange9, 而我们又传入了一个 handleChange 方法，vue又会对onChange的方法进行汇总，导致实际传入 onChange=[handleChange, onChange9], 所以报警告，期待的是 Function, 但是传入的是 Array

html 复制代码

// CustomUserSelect 将根元素设置为div 即可消除警告
<template>
  <div>
    <Select @change="handleChange" placeholder="请选择" allowClear>
      <SelectOption value="1">1</SelectOption>
      <SelectOption value="2">2</SelectOption>
      <SelectOption value="3">3</SelectOption>
    </Select>
  </div>
</template>

// 完美解决警告