您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 357人已围观

简介 vue事件监听函数on中的this指针域使用_vue.js_

事件监听函数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:`         
     ` })

可以看到，在组件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浅析axios二次封装与节流及防抖的实现_vue.js_

下一篇：JavaScript中return返回多个值的三个方法实现_javascript技巧_