美文网首页Vue生态圈Vue学习
vue回调函数中this无效

vue回调函数中this无效

作者: 知足常乐晨 | 来源:发表于2018-12-04 10:26 被阅读1次

在vue中使用回调函数,发现函数体中使用this无效,无法调到methods里面定义的getCurrentExtent()函数。

     handler.setInputAction(function(wheelment) {
        var extent = this.getCurrentExtent(viewer);
        console.dir(extent);
      }, Cesium.ScreenSpaceEventType.WHEEL);

回调函数的内部的this并非指向当前的vue实例;如果要使用,用在外部函数定义的变量存储的this,也就是当前vue的实例。

     var _this = this;
     handler.setInputAction(function(wheelment) {
        var extent = _this.getCurrentExtent(viewer);
        console.dir(extent);
      }, Cesium.ScreenSpaceEventType.WHEEL);

也可改为箭头函数来实现

      handler.setInputAction(wheelment => {
        var extent = this.getCurrentExtent(viewer);
        console.dir(extent);
      }, Cesium.ScreenSpaceEventType.WHEEL);

箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。此时this在箭头函数中已经按照词法作用域绑定了。很明显,使用箭头函数之后,箭头函数指向的函数内部的this已经绑定了外部的vue实例了.

相关文章

  • vue回调函数中this无效

    在vue中使用回调函数,发现函数体中使用this无效,无法调到methods里面定义的getCurrentExte...

  • 关于$nextTick的使用

    在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 在...

  • apply和call语句

    运动框架的应用实例 结合 异步和回调函数 中的 「回调函数2」我们可以试图在回调函数中,用this表示oDiv对象...

  • Vue全局 API 之 nextTick 函数的实现

    Vue 官方文档中对于 `nextTick` 函数的介绍为 : **在下次 DOM 更新循环结束之后执行延迟回调...

  • javascript高级-

    函数类型中,比较常用的是匿名函数和回调函数,一般来说,回调函数是以匿名函数的形式来进行表现的。回调函数在事件监听,...

  • iview cdn引用过程中出现的问题

    1.表单数据校验回调函数传进去无效(与标签有关,不能使用驼峰式,否则校验后的回调函数无法进入)2.新建的组件便签不...

  • JavaScript函数_08回调函数

    回调函数 回调函数(回调),当我们把某个函数作为参数传递给另一个函数的时候,这个函数就是回调函数 回调函数的基本写...

  • python之回调函数和装饰函数

    一.回调函数 1.回调函数的概念: 是在某一函数中调用另一个函数变量方式,来执行函数.回调函数不是有实现方调用,...

  • Vue - day8

    day8 Promise 引入 回调地狱 回调函数中 嵌套 其他回调函数 例子: 多个文件依次读取 解决方法: ...

  • Promise

    回调 把一个函数A传给另一个函数B调用,那么A就是回调函数。 回调地狱 回调套回调套回调套回调套回调套回调套回调....

网友评论

    本文标题:vue回调函数中this无效

    本文链接:https://www.haomeiwen.com/subject/hnxmcqtx.html