VUE自定义事件

VUE的自定义事件

作用：通过自定义事件，把数据作为参数传给父组件，实现组件之间的通信

定义自定义事件

1. 在组建标签中使用V-on+自定义事件名称，或使用简写方式@+自定义事件名称实现给组件绑定自定义事件。

//student组件定义一个goSchool事件
<student V-on:goSchool="goSchool"/>
<student @goSchool="goSchool"/>

2. 还可以在组件标签中使用ref属性，添加ref后，在父组件中，使用$refs.ref的属性值.$on(自定义事件名称，事件的回调)绑定自定义事件，值得注意的是，如果事件的回调以普通函数的方式直接写在$on，回调的this指向为绑定自定义事件的组件对象，这样容易出现问题，可以把回调写成箭头函数，this便指向了自定义事件组件的父组件上，最好直接把回调写在methods中，methods中的this，VUE都会挂载到methods所处的组件上（补充一下，因为要使用回调，所以this必须指向回调函数所在的那个组件实例）

//添加ref属性
<student @goSchool="goSchool" ref="student"/>
//定义自定义事件
this.$refs.student.$on("goSchool",this.go)//this指向本组件
配置methods
methods:{
    go(形参){
        //函数体
    }
}
//如果把回调这
this.$refs.student.$on("goSchool",go(形参){
        //函数体
})//此时回调中的this指向student组件实例
//非要写着，可以用箭头函数
this.$refs.student.$on("goSchool",(形参)=>{
        //函数体.此时this指向本实例
})

使用自定义事件

通过$emit(自定义事件名称，参数)调用

//在student组件中，一个DOM事件触发，比如click，他的回调为goTOSchool
methods:{
    goTOSchool(){
        //之前在student组件实例对象上已经绑定了goSchool事件，通过this.$emit，可以访问到
        this.$emit("goSchool",参数)
    }
}

以上就是个人总结，欢迎大佬指正，谢谢