浅谈Vue 自定义事件——原理及用法

前言

在Vue 中，对HTML的原生事件做了支持。例如：click、focus、change等事件。除了原生事件外，Vue 还允许用户自定义事件。

什么是事件？什么是自定义事件？

在了解自定义事件前，先来了解什么是事件。

事件就是用户对窗口上各种组件的操作。
使用事件机制可以实现：当类对象的某个状态发生变化时，系统将会通过某种途径调用类中的有关处理这个事件的方法或者触发控件事件的对象就会调用该控件所有已注册的事件处理程序等。

来自百度百科—— 事件 （计算机术语）

事件是指被程序发现的行为或发生的事情，而且它可能会被程序处理。

来自 CSDN AndyNikolas ——在 JavaScript 中， 究竟什么是 事件，事件 是指什么？

从上面两段引用大致可以看出：计算机的事件是组件状态发生了变化，触发了对应的处理程序。

本质上就是：计算机监听某件事(Event)，只要这件事发生了，就执行特定的操作。细分下来，事件（Event）分为三部分：

1. 声明需要监听的事件
2. 设置事件触发后的要执行的代码
3. 触发监听事件

在实际开发中，第一点和第二点往往是一并设置。也就是说，如果要设置一个事件，需要做两件事情：

1. 添加事件（包括声明事件、设置执行代码）
2. 触发事件

Vue 如何添加自定义事件

上面说到计算机的事件由两部分组成：添加事件、触发事件。在Vue 想要添加自定义事件也是如此。

添加事件：

// callback 可接收$emit传递过来的参数
$on(eventName，callbcak)

触发事件：

$emit(eventName, 传递给事件callback的数据)

移除事件:

$off(eventName, callback)

自定义事件用途

自定义事件在Vue常用于组件间的数据传递。

子组件向父组件传递数据

父组件：

<template>
  <div>
    {{ msg }}
  <Child @changeMsg="change">Child>
  div>
template>

<script>
import Child from './Child.vue'
export default {
  data() {
    return {
      msg: ''
    }
  },
  components: {
    Child
  },
  methods:{
    change(val){
      this.msg = val;
    }
  }
}
script>

子组件：

<template>
    <div>
        <button @click="trigger()">changebutton>
    div>
template>
<script>
export default {
    methods: {
        trigger(){
            this.$emit('changeMsg', '126513')
        }
    }
}
script>

上面例子中，父组件导入了子组件，并在子组件的根标签上注册了监听事件changeMsg。若changeMsg被触发，则调用父组件里的change()方法。子组件则通过this.$emit('changeMsg', '126513')来触发changeMsg。

这里需要注意一点：父组件注册监听事件时一定要添加给子组件的根标签（也就是这里的）。否则，子组件无法找到changeMsg事件。

兄弟组件间的通讯

自定义组件也可以用于兄弟组件间的通讯，需借助事件总线来实现。具体请看Vue 组件间通讯之非父子组件间通讯——事件总线（EventBus）一文。

后记

灵活使用自定义事件，是开发的重要技能。其实，仔细观察HTML原生事件就会发现其跟自定义事件是一样的。区别无非就是在使用时HTML原生事件不用进行添加事件、设定触发事件操作而已。因为HTML早早替用户写好这部分了。这样看来，自定义事件是对原生事件的扩展与补充，更灵活、更高级了。

以上，就是我关于Vue自定义事件的见解。如有不对，望指出，必将虚心听取。