Question

我有一个包裹锚点的组件：

Vue.component('wrapper-link', {
    template : `
        <div>
            <a href="xxx" v-on="$listeners">text link</a>
        <div>
    `
});

我正在我的应用中使用它：

模板：

<div id="app">
    <wrapper-link @click.stop="onClickEvent"></wrapper-link>
</div>

脚本：

let app = new Vue({
    el: '#app',
    methods: {
        onClickEvent() {
            console.log('clicked');
        }
    }
})

我希望单击text link后，本机click事件将被阻止，控制台将记录为“单击”；但那都没有发生。原生点击事件有效（已导航）。

我知道event.preventDefault()，但是我想使用Vue的事件修饰符。

Answer 1

您使用了.stop事件修饰符（调用event.stopImmediatePropagation()），但是您要寻找的行为是通过.prevent（调用event.preventDefault()）实现的：

<wrapper-link @click.prevent="onClickEvent" />

Vue.component('wrapper-link', {
  template: `
    <div>
      <a href="http://google.com"
         target="_blank"
         v-on="$listeners">Google</a>
    </div>
  `
});

new Vue({
  el: '#app',
  methods: {
    onClick(e) {
      console.log('click');
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <wrapper-link @click.prevent="onClick" />
</div>

Vue.js：如何从父组件处理子组件的本机事件

1 个答案: