vue事件监听函数on中的this指针域使用

目录 事件监听函数on中this指针域 vue中的this问题 在回调函数之前重新将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对象，所以建议多是想用箭头函数。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue事件监听函数on中的this指针域使用的详细内容...