vue.js - Vue阻止组件链接不起作用

Question

我有组件标签：

<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.jsvuejs2vue-component

Answer 1

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

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

阅读更多。

示例代码：

<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