Vue中外部库的this如何改变指向


#1

在vue中,this自动绑定到上下文实例中,可是有时候需要调用外部库,而外部库中this有特定的指向。比如

http://echarts.baidu.com/examples/editor.html?c=line-draggable

第116行,这里调用的this指的是鼠标事件

可是我尝试过用箭头函数不能改变这个this,这个this在vue中一直指的是上下文实例

再比如在d3中,涉及到鼠标事件时,在鼠标事件响应函数中,可以使用d3.select(this)获取鼠标点击的元素。可是如果在vue中嵌入d3,这里的select(this)就会返回上下文实例,而不是事件发生的元素

有没有什么方法可以灵活地处理this呢?就是说在外部库和vue上下文中分别让this指向不同的目标,如果有这种方法,可以作为一种使用外部库的通用的方法


#2

帮你呼叫大神:
@silentdepth


#3

this 是 JS 的语言特性,你没法让它自由地想指哪就指哪……

把强调 this 指向的函数封装起来,利用 .bind().call().apply()


#4

vue 里this永远指向vue实例化的对象,这个你改变不了,echarts的this永远指向echats实例的对象,你也改变不了


#5

把echarts挂载到window下,用window.echarts的方法可以在vue内部调用


#6

问一下,如何挂到window下?求教


#7
window.echarts = echarts

#8

跟这个一样把?vue.proporty.$echarts,以后用$echarts引用


#9

no.

计算属性你要是用箭头函数,this肯定不是组件实例

computed: {
    key: () => this.someProp // wrong
}

至于楼主的问题.要分情况,有时候不希望this指向当前vue实例的时候不是用箭头函数,而是用function

created() {
    document.body.onclick = function() { // 这里是举例,不是推荐你操作dom啊
        this.style.color = 'red'// this = dody
    }
}