vue form validate 多个input_vue 基础-组件中事件的触发和监听

前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。(里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读)

vue 中单纯的事件调用，你一定不陌生，简单的写一个 v-on:click=foo() 就可以触发。但组件事件的交互方式可能会遇到些小困难，相信第一次写时一定被事件命名到底驼峰(camelCase)还是短横杠(kebab-case)方式所困惑。

这篇以事件命名展开，讲下组件的事件机制。

事件的最佳命名方式

首先你要明确对事件命名需要使用哪种方式？

它和 props 命名类似，但有不同。props 即使你驼峰命名，模板上也可以通过短横杠方式定义传值的。

先看下驼峰命名方式：

程序如预期执行。但是你要知道可能一时的手误没有大写，或者因为 html 对大小写不敏感，导致事件发送不出去。

这里建议还是统一使用“短横杠”命名方式。这也是官网推荐的。

子组件如何发送事件

使用内置的 this.$emit 方法，代码如下：

子组件触发，并发送事件

触发父组件事件监听

监听函数执行

v-model 在组件上的使用

应该知道 v-model 是一个语法糖，它包含了数据的绑定和事件的定义。

来看下一个简单的子组件包含 input 元素的实现：

prop 会用一个默认的 value 来接收父组件中 v-model 传来的值，并且 input 事件会随着用户输入触发而发送出去：

父组件定义：

这就是表单 form 中 input 元素上使用 v-model 的简单例子。

非 input 事件

因为 v-model 默认是接收 input 事件的，其他表单事件如何处理？

需要在子组件中特殊指定 model ，来告诉父组件我是 change 的事件：

原生事件绑定修饰符 .native

当我们的子组件，就是一个 input 标签时，父组件尝试绑定 focus 聚焦事件时，却是无反应的。

子组件

父组件

这时可以通过 .native 修饰符来获取原生事件

但如果子组件是个复杂的 form 表单，或者外面包裹了一层其他标签，即使 .native 也无法子了。

事件监听 $listeners

上面这种情况怎么办呢？这时候就需要使用 $listeners 来放大招了。

vue 专门提供了 this.$listeners 来获取父组件写的事件监听器。来应对上例失效的情况：

子组件

子组件 js 逻辑部分

上图中注释已经可以说明问题了。我在针对其中细节补充下：

• 通过自带的 $attrs 来获取父组件模板中额外定义的属性，如，type=text
• 定义计算属性 inputListeners 返回一个事件监听对象。这个对象以 this.$listeners 为基础可以扩展我们自定义的事件方法。(如上图，定义了 input 以用来使得父模板定义的 v-model 的正常工作)

总结

从组件事件展开，讲了组件上事件的命名方式，同时针对日常编程中常见的 v-model 处理，以及一些特殊的事件问题做了解释说明。

关于我

一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。

关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。

点击 ↙ 了解更多，了解更多前端开发技术文章。