vue事件監(jiān)聽函數(shù)on中的this指針域使用

更新時(shí)間：2022年08月11日 17:21:32 作者：MSDN_tang

這篇文章主要介紹了vue事件監(jiān)聽函數(shù)on中的this指針域使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

事件監(jiān)聽函數(shù)on中this指針域

使用eventBus在兩個(gè)組件A，B之間通訊：

//定義全局eventBus用于事件傳遞
var bus = new Vue();
//A組件
var A = Vue.component({
?? ?...
?? ?
?? ?data:{
?? ??? ?dataA:1,
?? ?},
?? ?//在鉤子函數(shù)中將監(jiān)聽_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(){
?? ??? ??? ?//觸發(fā)事件_event
?? ??? ??? ?bus.$emit('_event', this.dataB);
?? ??? ?},
?? ?},
?? ?template:`
?? ??? ?<div v-bind:click="this.changeA"></div>
?? ?`
})

可以看到，在組件A監(jiān)聽事件_event事件的函數(shù)前需要提前保存this指針為this_com，因?yàn)樵诒O(jiān)聽函數(shù)中的this不再指向A組件本身，而是指向事件監(jiān)聽者bus。

另一種方案是用箭頭函數(shù)代替事件監(jiān)聽函數(shù)，因?yàn)榧^函數(shù)可以將指針域綁定到當(dāng)前組件

var A = Vue.component({
?? ?...
?? ?
?? ?data:{
?? ??? ?dataA:1,
?? ?},
?? ?//在鉤子函數(shù)中將監(jiān)聽_event事件
?? ?created:function(){
?? ??? ?var this_com = this;
?? ??? ?bus.$on('_event', value=>{
?? ??? ??? ?this_com.dataA = value;
?? ??? ?})
?? ?},
?? ?
?? ?...
})

vue中的this問題

在vue中當(dāng)在vue中使用匿名函數(shù)的時(shí)候，會(huì)出現(xiàn)this指針改變的問題，出現(xiàn)方法或者屬性數(shù)據(jù)undefine的問題，以下是相關(guān)的解決方法

在回調(diào)函數(shù)之前重新將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)
? ? ? ? })
? ? ? })
? ? }

使用箭頭函數(shù)

? 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)
? ? ? ? })
? ? ? })
? ? }

在回調(diào)函數(shù)中有時(shí)候回調(diào)函數(shù)會(huì)修改this的指向，this本來應(yīng)該指的是vue這個(gè)對(duì)象，但是他的this指向的是回調(diào)，由于在回調(diào)函數(shù)改變了this指針，導(dǎo)致后序出現(xiàn)this指向的數(shù)據(jù)出現(xiàn)未定義的狀況。

但是在箭頭函數(shù)中this指向的永遠(yuǎn)都是vue對(duì)象，所以建議多是想用箭頭函數(shù)。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: