Vue.js：如何从父组件对子组件进行本机事件处理答案

【问题标题】：Vue.js : How can I do native events handling of child component from parent componentVue.js：如何从父组件对子组件进行本机事件处理
【发布时间】：2018-09-01 15:20:36
【问题描述】：

我有一个包装锚的组件：

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事件会被阻止，控制台会记录'clicked'；但这些都没有发生。本机点击事件有效（发生导航）。

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

【问题讨论】：

标签： vue.js vuejs2

【解决方案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>

【讨论】：