Vue中的表单组件两次触发提交事件

Question

我使用的是最新版本的 Vue 3，没有其他供应商。

这可能是一个错误，或者是预期的行为，但我花了几个小时才找到为什么我的表单组件两次触发提交事件。

事实上，如果您在表单上收听 @submit，然后 $emit('submit') 以便您可以在父组件上收听此事件，则该事件将被触发两次。

不仅仅是文字，这里有一支笔来展示这一点： https://codepen.io/rekam/pen/dyeqxyy

const { createApp } = Vue

const TestForm = {
  template: `
    <form @submit.prevent.stop="onSubmit">
      <input type="text" />
      <input type="submit" value="in component" />
    </form>
  `,
  props: {
    eventName: { type: String }
  },
  methods: {
    onSubmit() {
      this.$emit(this.eventName)
    }
  }
}

createApp({
  template: `
    <div>
      <TestForm event-name="submit" @submit="() => onSubmit('with event name [submit]')" />
      <TestForm event-name="other" @other="() => onSubmit('with event name [other]')" />
      <blockquote>
        <p v-for="(log, i) in logs" :key="i">{{ log }}</p>
      </blockquote>
      <input type="button" value="clear" @click="logs = []" />
    </div>
  `,
  components: { TestForm },
  data: () => ({
    logs: []
  }),
  methods: {
    onSubmit(msg) {
      console.log(msg)
      this.logs.push(msg)
    }
  }
}).mount('#app')

我可以接受，我只需要为我自己的提交事件指定一个特定的名称。 我的问题是：为什么会发生这种情况，这是预期的吗？

编辑

我刚刚发现将表单标签包装在 div 中可以摆脱第二个提交事件。 要触发两次提交事件，您需要：

1. 您的表单成为组件中的顶级 dom 元素
2. 发出一个名为“提交”的事件

Answer 1

您使用从 emit 创建的事件监听器调用提交两次，另一个从添加到表单标记的 @submit 调用提交。 您应该使用其中之一来提交您的表格。

Answer 2

您不需要在您的子组件中添加事件 @submit.prevent.stop="onSubmit" 因为它将从父组件继承';

template: `
    <form>
      <input type="text" />
      <input type="submit" value="in component" />
    </form>
  `,

template: `
    <div>
      <TestForm event-name="submit" @submit.prevent="() => onSubmit('with event name [submit]')" />
      <TestForm event-name="other" @submit.prevent="() => onSubmit('with event name [other]')" />
      <blockquote>
        <p v-for="(log, i) in logs" :key="i">{{ log }}</p>
      </blockquote>
      <input type="button" value="clear" @click="logs = []" />
    </div>
  `,

https://codepen.io/keyXpert/pen/dyegYQB