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

 更新时间:2022年08月11日 17:21:32   作者:MSDN_tang  
这篇文章主要介绍了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对象,所以建议多是想用箭头函数。

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

相关文章

  • npm run dev报错信息及解决方法

    npm run dev报错信息及解决方法

    这篇文章主要为大家介绍了npm run dev报错信息及解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • element日期组件实现只能选择小时或分钟

    element日期组件实现只能选择小时或分钟

    本文主要介绍了element日期组件实现只能选择小时或分钟,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • Vue计时器的用法详解

    Vue计时器的用法详解

    这篇文章主要为大家详细介绍了Vue计时器的用法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Uniapp 实现顶部标签页切换功能(详细步骤)

    Uniapp 实现顶部标签页切换功能(详细步骤)

    本文介绍了如何在UniApp中实现顶部标签页切换功能,u-tab-bar组件提供了便捷的标签切换功能和丰富的样式选项,而swiper组件则更加灵活,支持自定义切换方式,根据自己的需求选择合适的方式实现顶部标签页切换,感兴趣的朋友一起看看吧
    2025-02-02
  • antd实现table组件选中单行换样式(比如背景颜色)

    antd实现table组件选中单行换样式(比如背景颜色)

    这篇文章主要介绍了antd实现table组件选中单行换样式(比如背景颜色),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3中使用ref语法糖的示例代码

    vue3中使用ref语法糖的示例代码

    Vue3提了一个Ref Sugar的RFC,即ref语法糖,目前还处理实验性的(Experimental)阶段,今天通过本文给大家介绍vue3中使用ref语法糖的相关知识,感兴趣的朋友跟随小编一起看看吧
    2022-09-09
  • vue-loader和webpack项目配置及npm错误问题的解决

    vue-loader和webpack项目配置及npm错误问题的解决

    这篇文章主要介绍了vue-loader和webpack项目配置及npm错误问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 源码分析Vue3响应式核心之reactive

    源码分析Vue3响应式核心之reactive

    这篇文章主要为大家详细介绍了Vue3响应式核心之reactive的相关知识,文中的示例代码讲解详细,对我们学习Vue3有一定的帮助,需要的可以参考一下
    2023-04-04
  • Vue.js中el-table表格自定义列控制与拖拽

    Vue.js中el-table表格自定义列控制与拖拽

    本文主要介绍了Vue.js中el-table表格自定义列控制与拖拽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue实现多个el-form表单提交统一校验的2个方法

    vue实现多个el-form表单提交统一校验的2个方法

    这篇文章主要给大家介绍了关于vue实现多个el-form表单提交统一校验的2个方法,文中通过代码示例介绍的非常详细,对大家学习或使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07

最新评论