javascript - VueJS 在内部访问 "export default{ }"与定义的常量主应用程序

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{ }”

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(){} 绑定(bind)它自己的 this 上下文，所以 this 将不再引用 Vue 组件实例

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

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

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