javascript - 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 -->

我怎样才能告诉 vue 只在第二个 <btn> 时阻止表单提交？被点击了吗？

Answer 1

您可以通过 @click.native.prevent 指定内联以防止 native 点击事件的默认行为:

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>