Vue Cli3.0 事件绑定箭头函数无法正确获取到this

Question

模板代码

<div style="position:absolute"
    :style="{
        width:width+'px',
        height:height+'px',
        left:left+'px',
        top:top+'px',
        backgroundColor
    }"
    @mousedown="onMouseDown($event)"
></div>

脚本代码

methods:{
        onMouseDown:(e)=>{
            let count = 0;
            this.inDragging = true;//这里的this指定元素而不是期望的组件实例
            window.addEventListener('mousemove',this.onDragging);
        },
}

Answer 1

原因：箭头函数的 this 的指向机制

解决：不要用箭头函数

    onMouseDown(e) {
        let count = 0;
        this.inDragging = true; 
        window.addEventListener('mousemove',this.onDragging);
    },

Answer 2

你可以打印一下this指向，官网写的很清楚的methods不建议使用箭头函数

Answer 3

箭头函数里this的作用域是括号内，
解决方法：
1.如上不要使用箭头函数
2.在函数外保留this

let $this = this;
onMouseDown(e)=>{
    $this.inDragging....
}

Answer 4

官方推荐写法, 好好撸一下文档吧.

methods:{
    onMouseDown(e){
        let count = 0;
        this.inDragging = true;//这里的this指定元素而不是期望的组件实例
        window.addEventListener('mousemove',this.onDragging);
    }
}