Vue组件的自定义事件

简单总结：一种组件间的通信方式，子组件 ==》父组件（通过为子组件绑定自定义事件），在Vue实例或组件被销毁后失效

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。当在HTML页面中使用 JavaScript时，JavaScript可以触发这些事件。

JavaScript中的事件分为两大类：

对比props

其实本质上都是先在父组件自定义一个方法然后传递给子组件，等待子组件触发调用。

但是props不仅适用于子父组件间通信，还适用于所有组件间通信（没错，爷孙组件间也适用不过很麻烦），而且props本职是传递数据给其他组件使用（可以把函数方法看作是数据的一种）。

而且，二者的使用方法也不同。props需要在子组件中增加配置props数组来接收方法，而自定义事件是通过$emit触发事件调用方法。

下面通过一个简单的小案例说明在Vue组件中自定义事件的基本使用

父组件：App
子组件：Student 点击子组件中的按钮，触发自定义事件，传递子组件中的学生姓名给父组件，并渲染到html页面结构上显示

两种方法：（xxx是自定义事件名）

1.    v-on:xxx='函数'  或  简写  @xxx ='函数'

2.    通过ref属性操作对应组件，给他绑定自定义事件
      this.$ref.ref属性名.$on('xxx',函数)

相比起来这种方法更加灵活。比如可以添加一个定时器延迟绑定。

如果该事件只允许被触发一次，可以在绑定时添加once修饰符或用$once绑定

函数方法需要事先在methods中定义

若使用ref属性，也可以同时在绑定时顺便定义函数方法，但是需要写成箭头函数的形式（因为此处如果写成普通function的形式，this指向的不是当前父组件）

this.$emit('xxx',参数)

当子组件传递其他多个参数时，父组件可以通过使用ES6语法中的展开数组，来接收其他参数

解绑一个   this.$off('xxx')

解绑多个   this.$off(['xxx','xxxxxx'])

解绑所有   this.$off()

注意：
1、给哪个组件绑定，找哪个组件触发
2、组件上可以绑定DOM原生事件，但要加.native修饰符

查看生命周期图可以发现，Vue实例或组件销毁时，其身上的监听器、子组件和自定义事件都会失效，但是原生DOM事件不会。