一、自定义事件实现验证抛出事件
咱们写一个自定义事件、该事件旨在创立一个流动。假如咱们的邮箱和明码是必填项。咱们通过自定义事件在验证完邮箱和明码之后将 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 变量。
以上是对于自定义事件的理论应用场景，心愿能帮到您！