一、自定义事件实现验证抛出事件
咱们写一个自定义事件、该事件旨在创立一个流动。假如咱们的邮箱和明码是必填项。咱们通过自定义事件在验证完邮箱和明码之后将form表单数据传递给父组件。
页面成果如下：
<custom-form @submit="submitData"></custom-form>咱们最终想要的成果是想要在数据验证通过在父组件中调用submitData办法，从而进行提交。
当初咱们把焦点聚焦在custom-form组件中。以下是custom-form组件的具体实现代码：
<template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="流动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item label="明码"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item label="流动区域"> <el-select v-model="form.region" placeholder="请抉择流动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="流动工夫"> <el-col :span="11"> <el-date-picker type="date" placeholder="抉择日期" v-model="form.date1" style="width: 100%"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker placeholder="抉择工夫" v-model="form.date2" style="width: 100%"></el-time-picker> </el-col> </el-form-item> <el-form-item label="即时配送"> <el-switch v-model="form.delivery"></el-switch> </el-form-item> <el-form-item label="流动性质"> <el-checkbox-group v-model="form.type"> <el-checkbox label="美食/餐厅线上流动" name="type"></el-checkbox> <el-checkbox label="地推流动" name="type"></el-checkbox> <el-checkbox label="线下主题流动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="非凡资源"> <el-radio-group v-model="form.resource"> <el-radio label="线上品牌商资助"></el-radio> <el-radio label="线下场地收费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="流动模式"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(form.email, form.password)">立刻创立</el-button> <el-button>勾销</el-button> </el-form-item> </el-form></template><script> import { ElMessage } from 'element-plus' export default { data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '', email: 'xxx@163.com', password: '', }, } }, methods: { submitForm(email, password) { this.$emit('submit', { email, password }) }, }, emits: { click: null, submit: ({ email, password }) => { if (email && password) { return true } else { ElMessage({ message: 'Invalid submit event payload!', type: 'warning', }) return false } }, }, }</script>咱们应用email和password进行邮箱和明码输出值的绑定。同时在点击立刻创立按钮时调用submit先进行数据校验。待数据校验通过当前，再将数据传递给父组件进行提交操作。
二、v-model参数
接下来咱们实现组件上的 v-model 应用 modelValue 作为 prop 和 update:modelValue 作为事件来实现自定义组件v-model参数的配置与传递。页面成果如下：
咱们在父组件中引入model-eimits组件，并将v-model参数title、region、type传给model-emits组件。
<model-emits v-model:title="title" v-model:region="region" v-model:type="type"></model-emits>以下是model-emits组件的具体代码：
<template> <div style="margin: 20px"></div> <el-form label-width="80px" :model="formLabelAlign"> <el-form-item label="流动题目"> <input :value="title" @input="$emit('update:title', $event.target.value)" class="v-input" /> </el-form-item> <el-form-item label="流动区域"> <input :value="region" @input="$emit('update:region', $event.target.value)" class="v-input" /> </el-form-item> <el-form-item label="流动模式"> <input :value="type" @input="$emit('update:type', $event.target.value)" class="v-input" /> </el-form-item> </el-form></template><script> export default { data() { return { formLabelAlign: { region: '', type: '', }, } }, props: { title: String, region: String, type: String, }, emits: ['update:title', 'update:region', 'update:type'], }</script><style scoped> .v-input { border: 1px solid #dcdfe6; height: 40px; line-height: 40px; outline: 0; padding: 0 15px; width: 100%; border-radius: 4px; }</style>以上咱们通过emits自定义update:title、update:region、update:type事件在实现v-model参数的动态变化。
三、v-model修饰符
接下来咱们用自定义事件实现v-model修饰符将输出的首字母主动转为大写。页面成果如下：
<model-modifier v-model:letter.capitalize="text"></model-modifier>在父组件中引入v-model修饰符组件model-modifier，从而用自定义事件实现letter的首字母主动转为大写成果。以下是model-modifier的具体代码：
<template> <div style="margin: 20px"></div> <el-form label-width="80px"> <el-form-item label="字母"> <input :value="letter" @input="emitValue" class="v-input" /> </el-form-item> </el-form></template><script> export default { props: { letter: String, letterModifiers: { default: () => ({}), }, }, emits: ['update:letter'], methods: { emitValue(e) { let value = e.target.value if (this.letterModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } this.$emit('update:letter', value) }, }, created: function () { console.log(this.letterModifiers) }, }</script><style scoped> .v-input { border: 1px solid #dcdfe6; height: 40px; line-height: 40px; outline: 0; padding: 0 15px; width: 100%; border-radius: 4px; }</style>通过letterModifiers判断是否须要修饰符，在触发input事件时进行首字母的转换，并触发自定义事件update:letter将解决后的数据传递给父组件letter变量。
以上是对于自定义事件的理论应用场景，心愿能帮到您！