typescript - 从方法访问 vue 组件中的数据

Question

我目前在正确上下文中的 VueJs 组件中使用“this”时遇到问题。我已经阅读了很多答案，其中大多提到不使用箭头函数。正如您在我附加的代码块中看到的那样，我已经用常规箭头函数替换了箭头函数，嗯……上下文现在不同了，但关于错误消息

---

“TS2339:属性‘answer1’在类型‘{receiveValues(value1: string, value2: string): void; test(): string;}’上不存在。”

---

上下文现在是方法对象。我现在在这个问题上浪费了很多时间，我真的不知道该怎么办。所以我的问题是，如何获得访问数据的正确上下文？我感谢每一个帮助和小费!我在 ES2015 中使用 ts 编译器。

---

代码:

export default {
name: 'app',
components: {
  Editor,
  Chart,
},
methods: {
  receiveValues(value1: string, value2: string) {
    console.log(value1); 
    this.answer1 = value1; // This is where the error is thrown
    console.log('receiveValues ' + this.test()); // this works just fine
  },
  test() {
    console.log('blablabla');
    return 'did it';
  },
},
data() {
  return {
    content: 'I\'m Test Content!',
    answer1: '',
    answer2: '',
    answer3: '',
    answer4: '',
  };
},

---

不同于 this post例如，我的“this”上下文仅引用方法对象，因此我只能调用其函数，而不能调用组件本身的数据。

Answer 1

如果你在使用基于对象的 typescript 时在 vuejs 中遇到 ts2339 错误:

export default{}

检查以下步骤:

1. 首先你应该将 lang 设置为“ts”

   <script lang="ts">

2. 接下来你应该导入vue

   从“vue”导入 Vue；

3. 使用 export default Vue.extend 代替 export default

   导出默认 Vue.extend({
名称:“应用程序”作为字符串，
})

4. 检查您是否在此组件中使用了任何基于普通旧对象的 mixin，如果您尝试上面的步骤 (2,3)，它将解决问题。(考虑到您的 mixin.js 应该更改为 mixin.ts 才能用作有效的 typescript 文件)