VueJS 阻止自定义事件的默认操作

Question

我有一个<btn>由以下模板组成的组件：

<button @click="$emit('trigger')">
</button>

我在表单中使用该组件，如下所示：

<btn>Submit</btn>

现在有些情况我需要在表单中有两个按钮。其中一个提交了表格，另一个则没有。但因为他们都在我的表单内，所以他们都提交了表单。我不能做这样的事情：

<btn>Submit</btn> <!-- This button should submit the form -->
<btn @trigger="nextQuiz">Next</btn> <!-- This button should only execute the nextQuiz method -->

<btn>我如何告诉 vue 仅在单击第二个时才阻止表单提交？

Answer 1

您可以通过以下方式指定内联以防止本机单击事件的默认行为@click.native.prevent：

Vue.component('btn', {
  template:`
    <button @click="$emit('trigger')">
      <slot/>
    </button>
  `
})

new Vue({
  el: '#app',
  methods: {
    nextQuiz() {
      console.log('nextQuiz')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <form action="">
    <input name="bar">
    <btn>Submit</btn>
    <btn @click.native.prevent @trigger="nextQuiz">Next</btn> 
  </form>
</div>