亲宝软件园·资讯

展开

vue事件监听on的this指针域

MSDN_tang 人气:0

事件监听函数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对象,所以建议多是想用箭头函数。

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

加载全部内容

相关教程
猜你喜欢
用户评论