Javascript 观察程序中Vue类组件装饰程序的访问方法

基本上，我的问题与Github上的问题相同，不幸的是，这两个问题在被回答之前都被关闭了：/

我将Vue与Typscript和Vue类组件一起使用。 我需要做的是从@Component decorator中的观察者中访问我的（Vue-）类的方法。 我知道可以使用

this.$data

访问组件的数据，但是方法呢

我的代码在运行时工作，但在vscode中产生编译时错误（“属性'clearInfo'在类型'Vue'上不存在”）

您有两个选择：

在类本身中定义手表

在@Component的选项部分定义手表和方法

解释

解释可以在我留下的链接上阅读

由于您是在decorator

@组件（{…}）

中定义选项，因此在实例化类的上下文中可以使用该选项。Typescript不知道具体可用的是什么（我们希望它有那么智能）。你必须告诉它，这就是为什么我们有

公共clearInfo！：（wichMesh:number）=>无效零件。如果您不知道此语法的含义，我将用简短的文字进行解释，并在最后留下一个链接：

---

回答得非常好，信息量也非常丰富，谢谢！我最终决定使用第一个解决方案，因为我已经安装了vue属性装饰器，可能是通过vue typscript插件安装的。

@Component({
  watch: {
    firstMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(1);   // this produces the errors
      else this.showMeshInfo(newMesh, 1);
    },
    secondMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(2);
      else this.showMeshInfo(newMesh, 2);
    },
  },
})


export default class Info extends Vue {
  clearInfo(whichMesh : number) {
...
  }

  showMeshInfo(mesh : any, index : number) {
    ....
  }


}

// first you need to install vue-property-decorators with npm i -S vue-property-decorator
// This library has a lot of useful decorators. You can read more about it here: https://github.com/kaorun343/vue-property-decorator

import { Vue, Component, Watch } from 'vue-property-decorator'


@Component
export default class Info extends Vue {
  @Watch('firstMesh')
  public watchFirstMesh(newValue) {
     // ... do whatever you need to do with the newValue here
  }

  @Watch('secondMesh')
  public watchSecondMesh(newValue) {
     // ... do whatever you need to do with the newValue here
  }
}

@Component({
  watch: {
    firstMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(1);   // this produces the errors
      else this.showMeshInfo(newMesh, 1);
    },
    secondMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(2);
      else this.showMeshInfo(newMesh, 2);
    },
  },
  methods: {
   clearInfo(whichMesh : number) {
     ...
   },
   showMeshInfo(mesh : any, index : number) {
     ....
   }   
  }
})
export default class Info extends Vue {
  // Now you need to tell to typescript that there will be a method inside this class called clearInfo and showMeshInfo
  public clearInfo!: (wichMesh: number) => void;
  public showMeshInfo!: (mesh: any, index: number) => void;
}

public clearInfo!: (wichMesh: number) => void;

the ! part is called the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined."

The (wichMesh: number) => void; is the function signature. Basically it says: this will be a function that receives as the first argument a number (whichMesh) and returns void (=> void)