Question

我有一个在创建数据时请求数据的组件。但是，当返回数据时，我无法访问此父母范围内的任何内容。

// Service
class DataService {
  getDataFromService() {
    var p = new Promise(function(resolve, reject) {
      resolve({ message: 'hello world' });
    });
    return p;
  }
}
var dataService = new DataService();

// Component
Vue.component('review', {
  created: function() {
    this.fetchData();
  },
  methods: {
    fetchData: function() {
      var that = this;
      var hello = 'world';

      // normal function
      dataService.getDataFromService().then(function(data) {
        this.foo = data.message; // 'this' is undefined
        that.bar = data.message; // 'that' is undefined
        console.log(hello);      // 'hello' is undefined
      });

      // fat arrow
      dataService.getDataFromService().then((data) => {
        this.foo = data.message; // 'this' is undefined
        that.bar = data.message; // 'that' is undefined
        console.log(hello);      // 'hello' is undefined
      });
    },
  },
});

在上面的例子中，这个＆＃39;这个＆＃39;并且＆＃39;那＆＃39;是不确定的，我不知道为什么。我正在使用babel＆amp; browserify编译代码。

我尝试更改服务以使用回调而不是未改变任何内容的承诺。我也试过使用普通的＆＃34;功能（数据）＆＃34;而不是胖箭头功能。

更新该示例适用于JSFiddle！我猜这意味着它与babel / browserify / modules有关。

Answer 1

使用箭头函数消除了块作用域，使用回调函数你必须使用self = this来使用它，但是不能在箭头函数中运行这个脚本并查看最新情况：

                var cb= function(f){
                    f();
                } 


                var fetchData = function() {
                    var that = this;
                    this.data ='data';

                     cb( () => {
                         console.log('---')
                        console.log(data);
                        console.log(that);
                    });
                }

Answer 2

我最终转而使用webpack来阻止问题的发生。

Vue.js在方法内失去范围

2 个答案: