vue3.0 自定义事件
一、自定义事件实现验证抛出事件
我们写一个自定义事件、该事件旨在创建一个活动。假设我们的邮箱和密码是必填项。我们通过自定义事件在验证完邮箱和密码之后将form表单数据传递给父组件。
页面效果如下：
文章图片
我们最终想要的效果是想要在数据验证通过在父组件中调用submitData方法，从而进行提交。
现在我们把焦点聚焦在custom-form组件中。以下是custom-form组件的详细实现代码：
-
立即创建
取消
我们使用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-input {
border: 1px solid #dcdfe6;
height: 40px;
line-height: 40px;
outline: 0;
padding: 0 15px;
width: 100%;
border-radius: 4px;
}
以上我们通过emits自定义update:title、update:region、update:type事件在实现v-model参数的动态变化。
三、v-model修饰符 接下来我们用自定义事件实现v-model修饰符将输入的首字母自动转为大写。页面效果如下：
文章图片
在父组件中引入v-model修饰符组件model-modifier，从而用自定义事件实现letter的首字母自动转为大写效果。以下是model-modifier的详细代码：
.v-input {
border: 1px solid #dcdfe6;
height: 40px;
line-height: 40px;
outline: 0;
padding: 0 15px;
width: 100%;
border-radius: 4px;
}
通过letterModifiers判断是否需要修饰符，在触发input事件时进行首字母的转换，并触发自定义事件update:letter将处理后的数据传递给父组件letter变量。
【vue3.0 自定义事件】以上是关于自定义事件的实际使用场景，希望能帮到您！
推荐阅读
- 事件代理
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- 事件处理程序
- 列出所有自定义的function和view
- Android事件传递源码分析
- 66万奔驰漏油事件看宝宝无理取闹
- 「我的2017」——2017|「我的2017」——2017,大事件盘点
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- 心理工作要不断的评估现实事件对来访者心理造成的影响是什么