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对象,所以建议多是想用箭头函数。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标的详细步骤
这篇文章主要介绍了vue3+vite+ts通过svg-sprite-loader插件使用自定义图标,本文分步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09vue3+ts数组去重方及reactive/ref响应式显示流程分析
这篇文章主要介绍了vue3+ts数组去重方法-reactive/ref响应式显示,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
最新评论