title: Vue.js : How can I do native events handling of child component from parent component
body: <p>I have a component that wraps an anchor:</p>
  
  <pre><code>Vue.component('wrapper-link', {
      template : `
          &lt;div&gt;
              &lt;a href="xxx" v-on="$listeners"&gt;text link&lt;/a&gt;
          &lt;div&gt;
      `
  });
  </code></pre>
  
  <p>I'm using it like this in my app:</p>
  
  <p><em>template:</em></p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;wrapper-link @click.stop="onClickEvent"&gt;&lt;/wrapper-link&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>script:</em></p>
  
  <pre><code>let app = new Vue({
      el: '#app',
      methods: {
          onClickEvent() {
              console.log('clicked');
          }
      }
  })
  </code></pre>
  
  <p>I was expecting that after clicking <code>text link</code>, the native <code>click</code>-event would be blocked and the console would log 'clicked'; but none of that happened. The native click event worked (navigation occurred).</p>
  
  <p>I know of <code>event.preventDefault()</code>, but I want to use Vue's event modifiers.</p>