vue2.x中使用TS来构建mixin步骤

在vue2.x的版本中，我们经常会使用mixin来进行重复代码的抽离，JS的用法能在网络上找到很多资源，这里就不在赘述了。在此主要想介绍一下怎么通过TS来进行mixin组件的抽离。

首先构建mixin文件，此处和JS构建的方式不一样，JS一般的构建方式是通过创建mixin.js文件然后在文件内部通过export来进行导出，然后得到抽离出来的公共部分。而TS需要创建的是一个xxx.vue的文件，而后在vue文件中构建<script lang="ts">的标标签来抽取公共部分的。代码如下：

//myMixins.vue文件

<script lang="ts">

import { Vue, Provide, Component } from 'vue-property-decorator';
@Component
export default class xxxx extends Vue {

   @Provide() public showDialog: boolean = false;
   @Ref() public readonly couponForm;
   public clearValidate() {
        this.couponForm.clearValidate();
    }

}

</script>

// 需要使用的文件  App.vue
import { Mixins, Component } from 'vue-property-decorator';
import { xxxx } from './myMixins.vue';
@Component
export default class AddCoupon extends Mixins(xxxx) {
   /*
    代码段
    */
}