vue3.0 自定义事件

一、自定义事件实现验证抛出事件

我们写一个自定义事件、该事件旨在创建一个活动。假设我们的邮箱和密码是必填项。我们通过自定义事件在验证完邮箱和密码之后将form表单数据传递给父组件。

页面效果如下:

vue3.0 自定义事件_第1张图片

我们最终想要的效果是想要在数据验证通过在父组件中调用submitData方法,从而进行提交。
现在我们把焦点聚焦在custom-form组件中。以下是custom-form组件的详细实现代码:


我们使用email和password进行邮箱和密码输入值的绑定。同时在点击立即创建按钮时调用submit先进行数据校验。待数据校验通过以后,再将数据传递给父组件进行提交操作。

二、v-model参数

接下来我们实现组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件来实现自定义组件v-model参数的配置与传递。页面效果如下:

vue3.0 自定义事件_第2张图片

我们在父组件中引入model-eimits组件,并将v-model参数title、region、type传给model-emits组件。

以下是model-emits组件的详细代码:



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

三、v-model修饰符

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

vue3.0 自定义事件_第3张图片

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



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

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

你可能感兴趣的:(vue.js前端es6css)