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>

Answer 2

设置type。

Vue.component("btn",{
  props:{
    submit: Boolean
  },
  computed:{
    type() { return this.submit ? 'submit' : 'button' }
  },
  template: `
    <button :type="type"  @click="$emit('trigger')"><slot></slot></button>
  `
})

用过：

<form action="">
  <btn submit>Submit</btn>
  <btn>Don't Submit</btn>
</form>

这是一个例子。

＆＃13;

console.clear()

Vue.component("btn",{
  props:{
    submit: Boolean
  },
  computed:{
    type() { return this.submit ? 'submit' : 'button' }
  },
  template: `
    <button :type="type"  @click="$emit('trigger')"><slot></slot></button>
  `
})

new Vue({
  el: "#app"
})

＆＃13;

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <form action="">
    <btn submit>Submit</btn>
    <btn>Don't Submit</btn>
  </form>
</div>

＆＃13;

@thanksd和我的一个人有类似的想法。您也可以使用prevent修饰符。

Vue.component("btn",{
  props:{
    submit: Boolean
  },
  template: `
    <button v-if="submit" @click="$emit('trigger')"><slot></slot></button>
    <button v-else="submit" @click.prevent="$emit('trigger')"><slot></slot></button>
  `
})

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

2 个答案: