Vue动态组件为a或router-link时同时绑定click和click.native是否有问题

现有方案的隐患分析 #

你当前同时绑定@click和@click.native的写法没有功能性隐患，可以正常在线上环境运行：

• 当动态组件渲染为原生<a>标签时，Vue会自动忽略带.native修饰符的事件绑定，只有普通@click会触发doStuff
• 当动态组件渲染为router-link组件时，普通@click监听的是组件内部自定义emit的click事件（router-link默认不会抛出该事件），只有.native修饰的原生点击事件会生效

两种场景下不会出现重复触发的问题，唯一的缺点是写法冗余，不熟悉背景的维护者可能会疑惑双事件绑定的作用。

更优处理方案 #

方案1：使用v-on对象绑定（推荐，无需大改代码） #

利用Vue支持v-on绑定事件对象的特性，用计算属性动态返回对应事件配置，避免冗余的双事件绑定：

<component 
   :is="checkComp" 
   v-on="linkEvents"
>
    <div>Lots of nested content in here</div>
</component>

computed: {
  checkComp() {
     return this.showRouter ? 'router-link' : 'a'
  },
  linkEvents() {
    return this.showRouter ? { 'click.native': this.doStuff } : { click: this.doStuff }
  }
}

方案2：父容器事件冒泡适配 #

如果内部内容没有阻止点击冒泡的逻辑，可以直接把点击事件绑定在公共父元素上，无需区分组件类型：

<div @click="doStuff">
  <component :is="checkComp">
    <div>Lots of nested content in here</div>
  </component>
</div>

方案3：Vue3版本自动兼容 #

如果后续升级到Vue3，.native修饰符已被移除，所有组件的@click默认都会监听原生点击事件，直接写@click="doStuff"即可同时适配两种组件。

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