一、环境准备
vue + ant-design-vue
二、问题警告
[Vue warn]: Invalid prop: type check failed for prop "onChange". Expected Function, got Array
at <ASelect value="" onUpdate:value=fn onChange=[fn,fn]
// 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
// 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>
// 完美解决警告
