vue-property-decorator混入mixin

从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的验证问题，这里不推荐使用。