Vue动态组件切换router-link与a标签时如何条件使用@click.native修饰符

可行处理方案 #

方案1：分支渲染（最推荐，易维护） #

直接按渲染类型拆分两个标签分支，分别绑定对应规则的点击事件即可，逻辑清晰无兼容问题：

<router-link
  v-if="show"
  @click.native="hasPerms"
  <!-- 其他公共属性 -->
/>
<a
  v-else
  @click="hasPerms"
  <!-- 其他公共属性 -->
/>

如果两个标签有大量公共属性，可以把公共属性抽成计算属性用v-bind统一绑定，减少重复代码：

<router-link
  v-if="show"
  v-bind="linkCommonProps"
  @click.native="hasPerms"
/>
<a
  v-else
  v-bind="linkCommonProps"
  @click="hasPerms"
/>

<script>
export default {
  computed: {
    linkCommonProps() {
      return {
        // 这里放两个标签共用的属性，比如to、href、class、style等
        class: 'operate-link',
        to: '/target/path',
        href: '/target/path'
      }
    }
  }
}
</script>

方案2：动态事件绑定（保留<component>动态渲染写法） #

如果一定要用动态组件的写法，可以用Vue的对象式v-on语法动态生成事件配置：

<component
  v-on="eventBindings"
  :is="checkComponent"
/>

<script>
export default {
  computed: {
    checkComponent() {
      return this.show ? 'router-link' : 'a'
    },
    eventBindings() {
      const bindings = {}
      // router-link是Vue组件，需要加.native修饰符监听原生点击；a是原生标签直接绑定click即可
      bindings[this.show ? 'click.native' : 'click'] = this.hasPerms
      return bindings
    }
  },
  methods: {
    hasPerms(e) {
      // 原有点击逻辑保持不变
    }
  }
}
</script>

补充说明：如果后续升级到Vue3不需要额外处理，Vue3已经移除了.native修饰符，所有组件上的事件默认都会监听原生事件。

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