自定義組件主動(dòng)觸發(fā)el-form校驗(yàn)

[原文](https://zhuanlan.zhihu.com/p/390466860

因?yàn)樵谖覀冏远x的組件內(nèi)部沒有觸發(fā)el.form.blur和el.form.change這兩個(gè)事件,所以想要使用 el-form, el-form-item 組件的表單校驗(yàn)功能,組件內(nèi)部必須要用包裹它的el-form-item組件$emit el.form.blur和el.form.change。
實(shí)際應(yīng)用如下 (blur 和 change 事件可根據(jù)需求選擇使用)

  <template>
    <el-form :model="formData" :rule="rules" ref="formRef">
        <el-form-item label="內(nèi)容" prop="inputValue" ref="inputValueRef"> <!-- 添加ref,   用來調(diào)用$emit -->
            <my-input v-model="formData.inputValue" @blur="$refs.inputValueRef.$emit('el.form.blur',$event)" @change="$refs.inputValueRef.$emit('el.form.change',$event)"></my-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</template>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容