vue中如何使用Mixins

这篇文章给大家分享的是有关vue中如何使用Mixins的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

使用 Mixins

Mixins 可以用于两种场景：

1. 利用它去抽取成组件内的公共代码加强代码复用，不要在全局内套来套去，最好在组件内或者页面中使用。

2. 利用它去分离功能点，有时候会遇到一种情况，就是业务功能很多导致写起来的 Vue 文件行数很多，导致代码很难以维护，功能点代码不好追踪。可以通过抽取功能代码的方式，让这个庞大的 Vue 文件更好维护。

首先写一个公共的 mixin 文件， 把高复用的状态和函数写进去。

export default class CommonMixins extends Vue{
    public paginations = {
        pageSize: 20,
        total: 0,
        currentPage: 1,
    }
    handleChangePageSize (pageSize: number, cb: Function) {
        this.paginations.pageSize = pageSize;
        cb();
    }
    handleChangePageNum (currentPage: number, cb: Function) {
        this.paginations.currentPage = currentPage;
        cb();
    }
}

vue-property-decorator 提供了 Mixins 的装饰器，在业务页面中引入 Mixin 只需要往里 Mixins 传入 ， 可以传多个，表示混入多个 Mixin。

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import CommonMixins from "./common-mixin";
import PermissionMixins from "./permission-mixin";
@Component({})
export default class Parent extends Mixins(CommonMixins, PermissionMixins) {
}
</script>

如果只需要一个的话，也可以直接继承

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import CommonMixins from "./common-mixin";
@Component({})
export default class Parent extends CommonMixins {
}
</script>

在遇到功能点多，代码量大的页面时，我们可以利用 Mixin 抽离一些功能点，通过文件去管理这些功能，这样会比较方便去管理代码。

感谢各位的阅读！关于“vue中如何使用Mixins”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！