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);     },