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组件的详细代码：

以上我们通过emits自定义update:title、update:region、update:type事件在实现v-model参数的动态变化。

三、v-model修饰符

接下来我们用自定义事件实现v-model修饰符将输入的首字母自动转为大写。页面效果如下：

在父组件中引入v-model修饰符组件model-modifier，从而用自定义事件实现letter的首字母自动转为大写效果。以下是model-modifier的详细代码：

通过letterModifiers判断是否需要修饰符，在触发input事件时进行首字母的转换，并触发自定义事件update:letter将处理后的数据传递给父组件letter变量。

以上是关于自定义事件的实际使用场景，希望能帮到您！