Vue自定义组件添加属性触发事件处理器类型错误警告解决

问题背景 #

重装node_modules后，项目出现大量Vue警告。给自定义组件<AInput>添加class、placeholder这类常规属性时，浏览器控制台会抛出事件处理器类型错误警告，提示传入的是字符串而非函数/函数数组。

无效排查尝试 #

• 调整属性绑定方式
• 将项目迁移至Vite构建工具
  以上操作均未能解决警告问题。

根因定位与修复 #

最终发现问题出在<AInput>组件内部：组件中的computed属性listeners在合并事件监听对象时，错误地把this.$attrs也包含了进去。由于this.$attrs里包含class、placeholder这类字符串类型的属性，合并后被当成事件处理器，从而触发类型错误警告。

移除listeners计算属性中合并this.$attrs的逻辑后，警告完全消失。

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