Vue自定义事件

Vue的自定义事件主要实现子传父的数据传递，首先在App组件定义一个自定义事件方法，被定义的组件实例会挂载添加当前的自定义事件，当自定义事件被调用，所对应的事件就会被触发。以传递学生姓名为以下案例。

1、在所需组件创建自定义事件(App.vue)

 <!-- 自定义事件 -->
    <Student v-on:Custom="getStudentName"/>

2、定义getstudentName函数方法(App.vue)

methods: {
    getStudentName(name) {
      console.log('App收到了组件名',name)
 } 

3、定义案例触发sendStudentName(Student.vue)

<button @click="sendStudentName">点击发送学生名</button>

4、this.$emit方法 调用实例上的自定义事件发送姓名(Student.vue)

 methods: {
        sendStudentName() {
            // 触发自定义事件
            this.$emit('Custom',this.StudentName)
        }
    }

5、this.$off解绑自定义事件(Student.vue)

定义解绑触发函数

<button @click="unbind">解绑自定义事件</button>

解绑自定义事件的方式

unbind(){
            this.$off('Custom') //解绑一个自定义事件
            this.$off(['Custom','xxx','xxx']) //解绑多个自定义事件
            this.$off() //解绑全部自定义事件
        }