做网站的风险分析,英文站 wordpress,网站开发中点赞怎么做到的,销售网站建设怎么样一、场景描述
我们知道绑定自定义事件可以用ref方式实现。 但是#xff0c;这个方式#xff0c;需要注意下#xff0c;否则#xff0c;实现不了我们的效果。
需求是这样的#xff0c;我们通过ref绑定的事件#xff0c;来给App的data块中的变量赋值。
二、绑定自定义事…一、场景描述
我们知道绑定自定义事件可以用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变量的赋值。
