我使用的是最新版本的 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 中可以擺脫第二個提交事件。要讓 submit 事件觸發兩次，您需要：
- 您的表單是組件中的頂級 dom 元素
- 發出一個名為“提交”的事件
uj5u.com熱心網友回復：
您不需要在您的子組件中添加事件 @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
uj5u.com熱心網友回復：
您使用從發出創建的事件監聽器和添加到表單標簽的@submit 的另一個事件監聽器呼叫提交兩次。您應該使用其中之一來提交您的表格。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513585.html
上一篇：在顫振動態串列視圖中洗掉一個專案是洗掉最后一個而不是洗掉選定的索引
下一篇：如何根據選擇值顯示動態輸入表單