从vue-property-decorator的文档中可以看到这么一句话:Mixins
(the helper function named mixins
provided by vue-class-component)
所以,vue-property-decorator中使用mixin的话,可以借助vue-class-component
安装vue-class-component
npm install vue-class-component --save
mixin文件:myMixin.ts
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class MyMixin extends Vue {
// data
public value: string = 'myMixin';
// method
public setValue (value: string) {
this.value = value
}
}
在myApp.tsx中使用myMixin.ts
import { Vue, Component } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import myMixin from './myMixin.ts'
@Component
export default class MyApp extends mixins(myMixin) {
public mounted () {
// 访问value
console.log(this.value) // myMixin
// 调用setValue
this.setValue('myApp')
}
}
以上,使用vue-class-component提供的Mixins,可以很方便的在ts中使用mixins。另外,还可以在component中使用mixin,但是需要绕过ts的验证问题,这里不推荐使用。