Vue3兼容构建下移除.native后自定义组件点击事件失效问题

为什么移除.native后点击失效？ #

你的Vite配置里设置了compatConfig: { MODE: 2 }，这个模式是完全模拟Vue2的运行行为。而Vue2的组件默认不会自动把父组件传递的未声明事件透传到根元素上——原来靠.native才能让click事件绑定到内部的button上，现在你去掉了.native，在MODE2模式下这个事件就不会被处理，自然失效了。

两种解决办法 #

办法1：继续使用Vue2兼容模式（MODE:2）

直接在EditButton组件的根元素上添加v-bind="$attrs"，把父组件传递的所有属性、事件都透传到内部的button上：

<template>
  <button class="EditButton" v-bind="$attrs">
    <SvgIcon name="edit" />
    <span>Edit</span>
  </button>
</template>

改完之后，调用方的代码不用动（去掉.native后的写法保持不变），id、disabled、click事件都会自动绑定到button上。

办法2：切换到Vue3兼容模式（逐步过渡）

如果想慢慢往Vue3的行为靠拢，可以把compatConfig的MODE改成MODE:3，或者单独调整事件透传的兼容配置：

vue({
  template: {
    compilerOptions: {
      compatConfig: {
        MODE: 3,
        // 也可以单独关闭ATTRS_EVENTS_FALLTHROUGH的兼容，让Vue3的透传规则生效
        // ATTRS_EVENTS_FALLTHROUGH: false
      }
    }
  }
}),

MODE3是部分兼容模式，会启用大部分Vue3的默认行为，包括未声明的事件自动透传到根元素，这样你去掉.native后的写法就会正常生效。不过要注意，切换MODE3可能会引发其他Vue2代码的兼容问题，需要逐步测试。

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