Vue-组件自定义事件

父组件使用props传递数据给子组件，子组件给父组件通信除了通过父组件提前给子组件传递一个函数，子组件使用该函数，利用传递参数的形式给父组件传值，回调在父组件中，

这里再提供一种方法：Vue的自定义事件，本文将详细介绍Vue自定义事件

使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

绑定自定义事件的方式

                                                                ❤️  第一种方式 ❤️

在父组件中：

   或 

methods:{ 

       //除了接受第一个参数，其他参数都放在数组里面

       test(name, ...params) {.....}  

}

                                                                ❤️  第一种方式 ❤️

在父组件中：

  

methods:{ 

       //除了接受第一个参数，其他参数都放在数组里面

       test(name, ...params) {.....}  

}

mounted() {  

       this.$refs.demo.$on('atguigu',this.test)  

} 

 子组件触发自定义事件

 this.$emit('atguigu',this.name, this.sex, 800)

// 子组件触发自定义事件的时候可以传递多个参数

解绑自定义事件

❤️   解绑一个自定义事件：this.$off('atguigu')

❤️   解绑多个自定义事件：this.$off(['atguigu', 'demo'])

❤️   解绑所有的自定义事件：this.$off()

组件上也可以绑定原生DOM事件，需要使用native修饰符 

注意事项：

通过this.$ref.xxx.$on('atguigu',回调)。绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题 

完整案例

App.vue父组件

Student.vue子组件