Question

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

from PyQt4 import QtCore, QtGui
from PyQt4.QtGui import *

self.my_list = QtGui.QListWidget(self.centralwidget)
self.room_no.setObjectName(_fromUtf8("my_list"))
self.my_list.addItem("Hello this is scroll message in pyqt4")
item = self.my_list.item(0)
self.my_list.setItemSelected(item, True)
self.my_list.scrollToItem(item)

但是，我的组件JavaScript看起来像这样。 //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 } } });正在运行 - 我已经检查过 - 但我似乎无法以相同的方式访问我的数据和方法，主要是因为我不熟悉“export default {}”

created

如何在第二个示例中使用上述调用才能在此处工作？即我将如何访问数据和方法？两者是否可以同时声明变量和“导出默认值”，以便导出的默认值可以引用自身？

Answer 1

您可以使用箭头功能xhr.onload = (a)=>{}来解决此问题。

普通函数function(){}绑定自己的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
  }
};

VueJS在内部访问“export default {}”与已定义的常量主应用程序

1 个答案: