title: VueJS prevent default action on custom event
body: <p>I have a <code>&lt;btn&gt;</code> component which consists of the following template:</p>
  
  <pre><code>&lt;button @click="$emit('trigger')"&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>I use the component in my forms like this:</p>
  
  <pre><code>&lt;btn&gt;Submit&lt;/btn&gt;
  </code></pre>
  
  <p>Now there are situations when I need to have two buttons in the form. One of them submits the form, and the other does not. But because both of them are inside my form, they both submits the form. I cannot do something like this:</p>
  
  <pre><code>&lt;btn&gt;Submit&lt;/btn&gt; &lt;!-- This button should submit the form --&gt;
  &lt;btn @trigger="nextQuiz"&gt;Next&lt;/btn&gt; &lt;!-- This button should only execute the nextQuiz method --&gt;
  </code></pre>
  
  <p>How can I tell vue to to prevent the form submission only when the second <code>&lt;btn&gt;</code> is clicked?</p>