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”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！