VueJS 在内部访问“导出默认值{}”与定义的常量主应用程序

Question

我的主应用程序页面中有以下代码，如果您使用 VueJS（我开始使用），这可能很熟悉：

//written in ES6
const app = new Vue({
el: '#app',
data: function(){ return {
    query: {},
    requests: [],
    original: {},
    assignees: {},
    transiting: false,
    editing: false,
}},
created: function () {
    console.log(this.requests);   //this works
    console.log(app.requests);    //this also works
    this.doSomething('bar');
},
methods: {
    doSomething: function(arg){
        console.log('foo is a '+arg); //this works too
    }
}
});

但是，我的组件 JavaScript 看起来像这样。 created 正在运行——我已经检查过了——但我似乎无法以同样的方式访问我的数据和方法，主要是因为我不熟悉“导出默认值{ }”

export default {
    name: 'request-tracking-calendar',
    data: {
            events: [
                {
                    id: 10,
                    name: 'Boris',
                    ssn: '515860000',
                },
                {
                    id: 11,
                    name: 'Natasha',
                    ssn: '575860001',
                },
            ]
    },
    created: function(){
        console.log('Updating events dynamically..'); 
        {
            //code omitted for clarity
            var xhr = new XMLHttpRequest();
            // etc.
            xhr.onload = function(a) {
                if (xhr.status === 200) {
                    for (var i in xhr.response.data){
                    //DOESN'T work! not a function

      console.log(this.convertJSONToEvent(xhr.response.data[i])); 
                    }
                    console.log(this.events); //DOESN'T work
                }
            };
            xhr.send();
        }
    },
    methods: {
        convertJSONToEvent(o){
            //do something to o..
            console.log('o was modified');
            return o;
        },

如何让第二个示例中的上述调用在这里工作？ IE。我将如何访问数据和方法？是否可以同时声明一个变量和“导出默认值”，以便导出的默认值可以引用自身？

Answer 1

你可以使用箭头函数xhr.onload = (a)=>{}来解决这个问题。

普通函数 function(){} 绑定自己的 this 上下文，所以 this 将不再引用 Vue 组件实例

箭头函数没有自己的this，所以this会自动继承自组件。

如果你不想使用箭头函数（因为某些浏览器不支持它），你可以先将this保存在一个变量中，然后在函数中使用它。 p>

var _this = this;
xhr.onload = function(a) {
  if (xhr.status === 200) {
    for (var i in xhr.response.data) {
      // use _this
      console.log(_this.convertJSONToEvent(xhr.response.data[i]));
    }
    console.log(_this.events); // use _this
  }
};