在Vue中，組件是一個包含所有表單元素的容器，包括文本框、下拉框和單選按鈕等。當我們使用組件提交表單時，Vue會自動采集表單數(shù)據(jù)并將其打包到一個JavaScript對象中，從而方便我們進行后續(xù)處理。

<template>
<form @submit.prevent="handleSubmit">
<div>
<label for="username">用戶名:</label>
<input type="text" name="username" v-model="form.username">
</div>
<div>
<label for="password">密碼:</label>
<input type="password" name="password" v-model="form.password">
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
handleSubmit() {
// 提交表單的處理邏輯
}
}
}
</script>

在上面的代碼片段中，我們定義了一個組件，并在其中添加了兩個文本框和一個提交按鈕。我們還創(chuàng)建了一個數(shù)據(jù)對象form用于保存表單數(shù)據(jù)，并在v-model指令中綁定了每個文本框和form對象的屬性。

最后，我們?yōu)?form>元素綁定了一個@submit.prevent事件監(jiān)聽器，用于捕獲表單提交時的事件。當用戶點擊提交按鈕時，Vue將自動調(diào)用handleSubmit方法處理表單數(shù)據(jù)。