vue + ts 混入（mixins）的使用方法

common.ts

import { Component, Vue } from "vue-property-decorator";
import { inApp, isIos } from "@/utils/index";
@Component
export default class CommonMixins extends Vue {
  public showBlock: boolean = false; 

  focus(e) {
    if (!isIos()) {
      this.showBlock = true;
    }
    this.$nextTick(() => {
      scrollIntoView(e);
    });
  }
  blur(e) {
    this.showBlock = false;
  }
}

home.vue

import CommonMixins from "../mixins/common";
import { mixins } from "vue-class-component";
@Component
export default class Expenditure extends mixins(CommonMixins) {
    console.log(this.showBlock); //false
}

如果有多个混入，可以继续添加

test.ts

import { Component, Vue } from "vue-property-decorator";
import { inApp, isIos } from "@/utils/index";
@Component
export default class CommonMixins extends Vue {
  public test: string = "测试混入"; 
}

home.vue

import CommonMixins from "../mixins/common";
import ScrollIntoView from "../mixins/ScrollIntoView";
import { mixins } from "vue-class-component";
@Component
export default class Expenditure extends mixins(CommonMixins, ScrollIntoView) {
    console.log(this.showBlock); //false
    console.log(this.test); //测试混入
    
}