vue-class-组件和混合
vue-class-component & Mixins
我在我的 Vue 项目中使用 vue-class-component 和 TypeScript。我有组件和 Mixin:
// MyComp.vue
import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.ts'
@Component
export class MyComp extends mixins(MyMixin) {
compValue: string = 'Hello';
}
// mixin.ts
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class MyMixin extends Vue {
created() {
console.log(this.compValue); // TS2339: Property 'compValue' does not exist on type 'MyMixin'.
}
}
它有效,但 TypeScript 抱怨缺少 属性 'compValue'。如何解决这个问题?
错误发生是因为 compValue
在 MyMixin
中不存在。如果这是从未实例化的抽象 class 并且保证 属性 存在,则可以声明它:
export default class MyMixin extends Vue {
compValue: string;
created() {
console.log(this.compValue);
}
}
我在我的 Vue 项目中使用 vue-class-component 和 TypeScript。我有组件和 Mixin:
// MyComp.vue
import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.ts'
@Component
export class MyComp extends mixins(MyMixin) {
compValue: string = 'Hello';
}
// mixin.ts
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class MyMixin extends Vue {
created() {
console.log(this.compValue); // TS2339: Property 'compValue' does not exist on type 'MyMixin'.
}
}
它有效,但 TypeScript 抱怨缺少 属性 'compValue'。如何解决这个问题?
错误发生是因为 compValue
在 MyMixin
中不存在。如果这是从未实例化的抽象 class 并且保证 属性 存在,则可以声明它:
export default class MyMixin extends Vue {
compValue: string;
created() {
console.log(this.compValue);
}
}