Vue阻止组件链接不起作用答案

【问题标题】：Vue prevent on component link not workingVue阻止组件链接不起作用
【发布时间】：2020-08-09 09:29:00
【问题描述】：

我有组件标签：

<template>
    <a href="url">hi</a>
</template>

在其他页面上我显示标签并希望在 mouseClick 上调用我的方法

<tag @click.prevent="myFunction"></tag>

但我得到重定向到 url。 防止修饰符不起作用。如何解决这个问题？

更新：

同样的问题，但如果将 html 'A' 更改为 vue 路由器链接

<template>
   <router-link :to="{ name: 'OtherPage'}"></router-link>
</template>

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

Binding Native Events to Components

有时您可能想直接监听组件根元素上的原生事件。在这些情况下，您可以为 v-on 使用 .native 修饰符：

只需将.native 修饰符添加到您的组件即可获得您期望的本机行为。

<tag @click.native.prevent="myFunction"></tag>

const Tag = Vue.component('Tag', {
  template: '<a href="http://url.com">My Link</a>',
  
})

new Vue({
  el: '#app',
  components:{
    Tag
  },
  methods:{
    myFunction(){
        alert(`Won't redirect you`)
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <tag @click.native.prevent="myFunction"/>
</div>

【讨论】：

谢谢。这是工作！我添加了有关路由器链接的“更新”。使用路由器链接，您的解决方案不起作用
与路由器它不是同一个问题也不是相同的行为，你应该打开一个新问题......同时看看这个问题github.com/vuejs/vue-router/issues/916

【解决方案2】：

您的代码无法正常工作，因为您在 tag 组件而不是 a 元素上添加了一个侦听器。

使用$listeners 属性，您可以将组件上的所有事件侦听器转发到具有v-on="$listeners" 的特定子元素

阅读more。

示例代码：

<div id='app'>
  <tag url='/abc' text='Click Me' @click.prevent='myFunction'></tag>
</div>

和

<template>
  <a :href='url' v-on='$listeners'>{{ text }}</a>
</template>

JSFiddle

【讨论】：

感谢您的解决方案。使用 ''.native.prevent' 更清晰的代码 :)