vue+ts中使用mixin

首先创建mixin文件

ximin.vue

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import {Getter} from 'vuex-class';
  // 以下为必加申明，如果不加再调用页面是无法使用的
  declare module 'vue/types/vue' {
    interface Vue {
      mixinGetList(params: any): Promise<any>;
    }
  }

  @Component({
    name: 'CommonMiXin'
  })
  export default class CommonMiXin extends Vue {
    @Getter('navList') public navList!: any;  // 导航列表用于获取一级菜单的id
    public parentId = '';  // 父级Id
    /***
     * 获取文章列表
     * @private
     */
    public mixinGetList(data: any) {
      const list = this.$api.xHttp.get(this.$interfaces.post.getList, data);
      console.log(list);
      return list;
    }


    public created() {
      this.$nextTick(() => {
        const parent = this.navList.filter((item: any) => item.name === 'XXX')[0];
        this.parentId = parent.id;
        console.log(this.parentId);
      });
    }
  }
</script>

调用页面 xx.vue

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import CommonMiXin from '../mixins/mixin.vue';

  @Component({
    name: 'TopNew',
    components: {},
    mixins: [CommonMiXin]
  })
  export default class TopNew extends Vue {
    private topNew = {};   // 专题页面的顶部新闻

    // private getTopNew() {
    //   const params = {};
    // }

    public created() {
      console.log(this.mixinGetList(111));  // 这里调用mixin页面的方法
    }
  }
</script>

目前调用事件没问题，但是有如果想mixin页面的parentId会出现报错，具体什么原因还不是很清楚，有大佬知道的可以留言