vue事件监听函数on中的this指针域使用
作者：MSDN_tang
这篇文章主要介绍了vue事件监听函数on中的this指针域使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
事件监听函数on中this指针域
使用eventBus在两个组件A，B之间通讯：
//定义全局eventBus用于事件传递
var bus = new Vue();
//A组件
var A = Vue.component({
...
data:{
dataA:1,
},
//在钩子函数中将监听_event事件
created:function(){
var this_com = this;
bus.$on('_event', function(value){
this_com.dataA = value;
})
},
...
})
//B组件
var B = Vue.component({
...
data:{
dataB = 2;
},
methods:{
changeA:function(){
//触发事件_event
bus.$emit('_event', this.dataB);
},
},
template:`
<div v-bind:click="this.changeA"></div>
`
})可以看到，在组件A监听事件_event事件的函数前需要提前保存this指针为this_com，因为在监听函数中的this不再指向A组件本身，而是指向事件监听者bus。
另一种方案是用箭头函数代替事件监听函数，因为箭头函数可以将指针域绑定到当前组件
var A = Vue.component({
...
data:{
dataA:1,
},
//在钩子函数中将监听_event事件
created:function(){
var this_com = this;
bus.$on('_event', value=>{
this_com.dataA = value;
})
},
...
})vue中的this问题
在vue中当在vue中使用匿名函数的时候，会出现this指针改变的问题，出现方法或者属性数据undefine的问题，以下是相关的解决方法
在回调函数之前重新将this赋值
例如
connection() {
// 更换that指针
var that = this
const socket = new SockJS('http://localhost:8080/test-info')
this.stompClient = Stomp.over(socket)
console.log('----------------')
console.log(this.stompClient)
console.log('----------------')
const tt = this.stompClient
// 此处不能使用 this.stompClient
tt.connect({}, function(frame) {
console.log('++++++++++++++++')
console.log('Connected: ' + frame)
console.log('++++++++++++++++')
tt.subscribe('/stock/price', function(val) {
console.log(val)
console.log(JSON.parse(val.body))
that.list1 = JSON.parse(val.body)
})
})
}使用箭头函数
connection() {
// 更换that指针
const socket = new SockJS('http://localhost:8080/test-info')
this.stompClient = Stomp.over(socket)
console.log('----------------')
console.log(this.stompClient)
console.log('----------------')
this.stompClient.connect({}, (frame) => {
console.log(frame)
this.stompClient.subscribe('/stock/price', (val) => {
console.log('--------list1-----------')
console.log(this.list1)
console.log('--------list1-----------')
this.list1 = JSON.parse(val.body)
})
})
}在回调函数中有时候回调函数会修改this的指向，this本来应该指的是vue这个对象，但是他的this指向的是回调，由于在回调函数改变了this指针，导致后序出现this指向的数据出现未定义的状况。
但是在箭头函数中this指向的永远都是vue对象，所以建议多是想用箭头函数。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。