Vue.js: как я могу сделать собственную обработку событий дочернего компонента из родительского компонента

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 будет заблокирован, и консоль будет вести журнал «нажал»; но ничего из этого не произошло. Сработало собственное событие щелчка (произошла навигация).

Я знаю о 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>