javascript - 在事件处理程序中引用 `this` vue 组件

Question

给定这个附加全局事件监听器的 Vue 组件:

var app = new Vue({
    data: {
        foo: 0;
    },
    methods: {
        handle: function(e) {
            this.foo = 1; // this refers to handler, not app
        }
    },
    mounted: function() {
        window.addEventListener("keypress", this.handle);
    }
});

引用 this的正确方法是什么从事件处理程序中更新组件状态？或者，是否有更好的方法在整个 window 上设置事件处理程序？ ?

Answer 1

其实this绑定(bind)到 vue 实例，您的代码工作正常。

var app = new Vue({
    el: "#app",
    data: {
        foo: 0
    },
    methods: {
        handle: function(e) {
            this.foo++; 
            console.log(this.foo);
        }
    },
    mounted: function() {
        window.addEventListener("keypress", this.handle);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
{{ foo }}
</div>

常见的错误是，例如，如果您有一个带有回调的函数并且您尝试使用 this在回调内部，它将是 undefined

    handle: function(e) {
        this.foo++; 
        setTimeout(function(){
           console.log(this.foo); //undefined
        })
        console.log(this.foo);
    }

您可以使用箭头功能

    handle: function(e) {
        this.foo++; 
        setTimeout(() =>{
           console.log(this.foo);
        })
        console.log(this.foo);
    }
},

或者，如果它需要向后兼容，您可以使用 .bind()

    handle: function(e) {
        this.foo++; 
        setTimeout(function(){
           console.log(this.foo);
        }.bind(this))
        console.log(this.foo);
    }
},