The input component props interface onUpdate:value should not be verified, this is not react, please use vue to handle props

[merfais]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

ant-design-vue": "^3.0.0-beta.3 ""vue": "^3.2.31"

Reproduction link

Steps to reproduce

1. 新建子组件input-demo，里面只使用a-input，组件绑定 @update:value接口, <a-input @update:value="onInputUpdate" />
   2.新建组件，使用上面定义的子组件，也绑定@update:value接口给 <InputDemo @update:value="onParentUpdate" />

What is expected?

不应该把onUpdate:value作为props定义的接口，更不应该限定props.onUpdate:value只接受function，这不符合vue的范式。

vue3本身支持了attrs的透传，props的合并与event事件合并策略是不一样的。antd-vue的代码却采用了react式的处理方式（事件也是props，即函数的参数，事件通过onXXX回调范式作为props传入子组件，事件的合并需要用户自己控制），但vue中event和props是不用的，是会做区分的，props与event的合并策略也是不一样的，props合并采用的覆盖策略, event采用的是合并到Array的策略。因此antd-vue粗暴的阉割这个规则是不合适的。

况且antd-vue的代码中并没有真实的使用了props.onUpdate:value的值，仅仅是做了校验（只接受function），否则如果传了Array类型的数据就直接报错，运行异常了。见上面的例子，并没有渲染异常，只在console中给了warning，而且行为也是符合预期的，子组件的onInputUpdate和父组件中的onParentUpdate函数都会执行，但这种在开发模式下的waring看着很烦（正式环境这些的waring会被去掉，这是vue自身的能力）。

因此，要么删除这种无意义的校验，要么改成校验类型为 VueTypeValidableDef<fn | fn[] >

What is actually happening?

console中报错
[Vue warn]: Invalid prop: type check failed for prop "onUpdate:value". Expected Function, got Array
at <AInput value="123" onUpdate:value= (2) [ƒ, ƒ] >
at <AntInput onUpdate:value=fn >
at

---

请有点责任感，不要随随便便关issue，看明白问题的描述，确认问题是不是真实存在。

你可以以修改这个校验会破坏组件库的某些feature为由，拒绝修改，做一些对vue自身功能的阉割也不是特别不能接受。但以这不是问题为由简单的关闭issue，这不可取。我明白开源不易，用爱发电也不易，但也请虚心接受issue提的问题。

[tangjinzhou]

ant-design-vue/components/input/Input.tsx

Line 199 in 80342f4

emit('update:value', (e.target as HTMLInputElement).value);

1、事件作为 props 在 vue3 中是支持的，antdv 后续规范都会将事件声明在props中
2、可以理解 emit('update:value') 等价 props.onUpdate:value
3、暂不支持数组，你可以 PR

[tangjinzhou]

感谢建议，但这就是 Vue，
对于支持数组问题，锦上添花吧，工作量有点大，你可以尝试 PR

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[KaygNas]

我也遇到了相同的问题，我有一个 <MyInput /> 组件对 <AInput /> 做了一些包装。

const MyInput = defineComponent({
  template: `<a-input @update:value="onAInputUpdateValue" />`,
  setup () {
      // ...
  }
})

因为 vue 的 $attrs 透传，同时因为 <MyInput /> 没有定义 update:value 的事件，导致当我使用

const App = defineComponent({
  template: `<my-input @update:value="onMyInputUpdateValue" />`,
  setup () {
      // ...
  }
})

时会将 onMyInputUpdateValue 和 onAInputUpdateValue 合并成一个数组绑定到 <a-input /> 上，最终使得参数校验错误，控制台打印出 warning。

其实 update:propName 事件通常是配合 v-model:propName 的语法糖使用的，这也是我的 <MyInput /> 的使用方式，所以只要在 <MyInput /> 声明上属性 value 和事件 update:value, 这样 onMyInputUpdateValue 就不会出现在 <MyInput /> 的 $attrs 中，自然不会向 <AInput /> 绑定两个 update:value 的事件监听了。

长话短说

对于我的情况：让 <MyInput /> 支持 v-model:value 而又不想因为 $attrs 透传合并监听函数导致控制台打印 warning，需要在 <MyInput /> 声明上属性 value 和事件 update:value 即可。

const MyInput = defineComponent({
  template: `<a-input @update:value="emit('update:value', $event)" />`,
  props: ['value'],
  emits: ['update:value'],
  setup () {
      // ...
  }
})

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.