从 Vue Class 观察器内部的组件装饰器访问方法
Access Method from Vue Class Component Decorator inside a Watcher
基本上我有与 Github 上的 this and this 问题相同的问题,不幸的是,这两个问题在得到回答之前都已关闭:/
我将 Vue 与 Typscript 和 Vue Class 组件一起使用。
我需要做的是从 @Component 装饰器内的观察者内部访问我的 (Vue-) Class 的方法。
我知道可以使用 this.$data
访问组件的数据,但是方法呢。
我的代码在运行时运行,但在 vscode 中产生编译时错误和错误(属性 'clearInfo' 在类型 'Vue' 上不存在。”);
@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) {
....
}
}
您有两个选择:
- 在 class 自身中定义手表
// 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 的选项部分定义监视和方法
@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;
}
说明
可以在我离开的 link 上阅读解释
由于您在装饰器 @Component({...})
中定义了选项,所以这将在实例化 class 的上下文中可用。 Typescript 不知道什么是可用的(我们希望它是那么聪明)。你必须告诉它,这就是为什么我们有 public clearInfo!: (wichMesh: number) => void;
部分。如果你不知道这个语法是什么意思我就简单的解释一下,最后留一个link:
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)
基本上我有与 Github 上的 this and this 问题相同的问题,不幸的是,这两个问题在得到回答之前都已关闭:/
我将 Vue 与 Typscript 和 Vue Class 组件一起使用。
我需要做的是从 @Component 装饰器内的观察者内部访问我的 (Vue-) Class 的方法。
我知道可以使用 this.$data
访问组件的数据,但是方法呢。
我的代码在运行时运行,但在 vscode 中产生编译时错误和错误(属性 'clearInfo' 在类型 'Vue' 上不存在。”);
@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) {
....
}
}
您有两个选择:
- 在 class 自身中定义手表
// 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 的选项部分定义监视和方法
@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;
}
说明
可以在我离开的 link 上阅读解释
由于您在装饰器
@Component({...})
中定义了选项,所以这将在实例化 class 的上下文中可用。 Typescript 不知道什么是可用的(我们希望它是那么聪明)。你必须告诉它,这就是为什么我们有public clearInfo!: (wichMesh: number) => void;
部分。如果你不知道这个语法是什么意思我就简单的解释一下,最后留一个link:
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)