Question

我正在为Vue.js编写一个组件，我需要修改事件数据。但出于某种原因，当我访问它时，它被设置为未定义

module.exports = {
    data: function() {
        return {
            visible: true
        }
    },
    mounted: function() {
        this.eventHub.$on('minimize', function(window_id) {
            console.log(this.visible);
            this.visible = !this.visible;
        });
    },
    props: ["windowId"]
}

第一次调用事件时，由于某种原因，data.visible未定义。

我有什么问题吗？

谢谢！

Answer 1

由于function (window_id)拥有自己的范围，因此您无法访问this。

这可以通过添加self = this来解决。

 let self = this
 this.eventHub.$on('minimize', function(window_id) {
    console.log(self.visible);
    self.visible = !self.visible;
 });

正如Nick Rucci指出的那样，你也可以使用箭头功能，摆脱self = this。

this.eventHub.$on('minimize', (window_id) => {
    console.log(this.visible);
    this.visible = !this.visible;
});

在Created或Mounted钩子中访问组件数据

1 个答案: