一、场景描述
我们知道绑定自定义事件可以用ref方式实现。
但是,这个方式,需要注意下,否则,实现不了我们的效果。
需求是这样的,我们通过ref绑定的事件,来给App的data块中的变量赋值。
二、绑定自定义事件
基本写法:
父组件App中
methods函数:
getStudentName(name,...params){console.log('App收到了学生名:',name,params)this.studentName = name
}
给Student组件绑定自定义事件test
mounted() {this.$refs.student.$on('test',this.getStudentName) //绑定自定义事件(一次性)}
此处的this是谁了?
其实,是Student组件的vc实例。Vue约定,谁触发的事件,那么,这个this就是谁。
但是,此处的this调用的函数,在App组件的methods中,所以,在getStudentName函数中的this,又变成了App组件的vc实例。
无效写法
this.$refs.student.$on('test',function () {console.log('App收到了学生名:',name,params)this.studentName = name})
原因就是,此时function里面的this是Student的vc实例,无法获取到studentName变量,所以,赋值失败。
改进写法:
//这种写法,可以给studentName变量赋值。this.$refs.student.$on('test',(name,...params) => {console.log('App收到了学生名:',name,params)this.studentName = name})
换成箭头函数,就可以实现基本写法的效果。为什么了?
因为,箭头函数没有自己的this,于是,Vue需要向外部寻找,这是,找到的this就是App组件的vc实例。
从而实现对studentName变量的赋值。