Vue的EditText組件是一種常用的表單輸入組件，它允許用戶編輯文本框中的內容，同時還能對文本內容進行校驗、限制等操作，方便實現表單數據的錄入和提交功能。

// 定義一個簡單的EditText組件
Vue.component('edit-text', {
template: '<input v-bind="$attrs" v-model="value" @input="onInput" @blur="onBlur">',
props: {
value: String, // 綁定值
placeholder: String, // 占位文本
maxLength: Number, // 最大長度
required: Boolean, // 是否必填
pattern: String, // 正則表達式校驗規則
errorMsg: String // 錯誤提示信息
},
methods: {
onInput(e) {
const value = e.target.value
// 進行輸入限制操作，如限制最大長度
if (this.maxLength && value.length >this.maxLength) {
this.value = value.slice(0, this.maxLength)
}
this.$emit('input', this.value)
},
onBlur() {
let errorMsg = ''
// 進行校驗操作，如必填校驗、正則表達式校驗等
if (this.required && !this.value) {
errorMsg = '必填項不能為空'
} else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
errorMsg = this.errorMsg || '輸入格式不正確'
}
this.$emit('blur', errorMsg)
}
}
})
// 使用EditText組件
new Vue({
el: '#app',
data: {
name: '',
age: ''
},
methods: {
onSubmit() {
// 判斷表單數據是否合法
const errMsg1 = this.$refs.nameEditText.$emit('blur')
const errMsg2 = this.$refs.ageEditText.$emit('blur')
if (errMsg1 || errMsg2) {
alert(errMsg1 || errMsg2)
return
}
// 提交表單數據
console.log('姓名：' + this.name + '，年齡：' + this.age)
}
}
})

以上代碼中，我們通過Vue.component()方法定義了一個EditText組件，定義了多個props屬性來同時接收父組件給定的各種屬性值，包括綁定值、占位文本、最大長度、是否必填、正則表達式校驗規則、錯誤提示信息等。在組件內部，通過v-bind指令將這些屬性綁定到文本框中，同時在onInput和onBlur方法中處理輸入限制和校驗操作，如果校驗不合法則通過$emit方法向父組件拋出錯誤信息。在父組件中，我們通過ref屬性和$refs對象獲取到EditText組件的實例對象，通過調用$emit('blur')方法觸發組件校驗邏輯并獲取校驗結果，最終拿到表單數據后進行提交即可。