什么是混入

混入 (mixin) ： 是一種分發(fā)Vue組件中可復(fù)用功能的非常靈活的一種方式。混入對象（mixins）是一個(gè)js對象，它可以包含我們組件中script項(xiàng)中的任意功能選項(xiàng)，如data、components、created、methods 、computed、watch等等。當(dāng)組件使用混入對象時(shí)，所有混入對象的選項(xiàng)將被混入該組件本身的選項(xiàng)。

創(chuàng)建Mixins

在src目錄下創(chuàng)建一個(gè)mixins文件夾，文件夾下新建自己要定義的混入對象js文件。使用對象的形式來定義混入對象，在對象中可定義與vue組件一樣的data、components、created、methods 、computed、watch等屬性，并通過export導(dǎo)出該對象.

代碼示例： pageMixin.js

export const  pageMixin={
    data() {
        return {
            page: { // 分頁信息
                pageNo: 10, // 當(dāng)前頁
                limit: 10, // 每頁行數(shù)
                total: 0, // 列表總數(shù)量
            },        
            tableList: [], // 列表數(shù)據(jù)
            loading: false, // 加載列表數(shù)據(jù)的Loading
            PAGE_SIZES: [5, 10, 20, 30, 50, 90], // 每頁行數(shù)列表,用于切換每頁行數(shù)
            LAYOUT: "total, sizes, prev, pager, next, jumper" // Element表格組件中使用的功能
        }
    },
    methods: {
        // 查詢列表數(shù)據(jù)
        queryList() {},
        // 修改當(dāng)前頁
        handleCurrentChange(pageNo) {
            this.page.pageNo = pageNo;         
            this.queryList();
        },
        // 修改每頁行數(shù)
        handleSizeChange(limit) {
            this.page.pageNo = 1;
            this.page.limit = limit;
            this.queryList();
        },
    },
}

使用Mixins

在需要調(diào)用的組件頁面中引入pageMixin.js文件

import {pageMixin} from "@/mixins/pageMixin"
export default {
    mixins: [ pageMixin ],
    data() {
      return {    	
      }
    }        
}

• 組件調(diào)用了混入對象故混入對象的選項(xiàng)會合并到當(dāng)前組件中。
• 當(dāng)混入對象和組件含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”。比如，數(shù)據(jù)對象在內(nèi)部會進(jìn)行遞歸合并，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先，即發(fā)生沖突會覆蓋混入對象的選項(xiàng)。

在組件（Home.vue）中使用

<template>
  <div class="home">
    <span>This is a Home page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";   //導(dǎo)入混入（mixin）
export default {
  name: 'Home',
  mixins: [myMixins]     //使用混入（mixin）
}
</script>

注意觀察Home組件里面，并沒有任何的生命周期鉤子或者方法，但是打開頁面之后查看控制臺，卻打印了內(nèi)容，這就是混入對象中的created鉤子中的console.log()。

mounted生命周期鉤子

<template>
  <div class="home">
    <span>This is a Home page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";
export default {
  name: 'Home',
  mixins: [myMixins],
  mounted(){         
    this.hello()     //在該組件中并沒用定義hello方法，使用的是混入中的hello
  }
}
</script>

選項(xiàng)合并

當(dāng)組件和混入對象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”。數(shù)據(jù)對象在內(nèi)部會進(jìn)行遞歸合并，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先。

此時(shí)，同名的created生命周期鉤子進(jìn)行了合并，合并為一個(gè)數(shù)組，因此都將被調(diào)用。另外，混入對象的鉤子將在組件自身鉤子之前調(diào)用。而methods中的hello方法因?yàn)闆_突，在合并時(shí)保留組件中的hello，即優(yōu)先當(dāng)前組件的選項(xiàng)，因此打印的是“hello from Home!”。

值為對象的選項(xiàng)，例如 methods、components 和 directives，將被合并為同一個(gè)對象。兩個(gè)對象鍵名沖突時(shí)，取組件對象的鍵值對。

可復(fù)用性

開篇提過，混入對象可成為一個(gè)可復(fù)用功能，我們在另外的組件中引入已定義的混入對象，可實(shí)現(xiàn)同樣的邏輯與功能。

如在另外一個(gè)組件About.vue使用該混入對象

<template>
  <div class="about">
    <span>This is an About page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";
export default {
  name: "About",
  mixins: [myMixins]
};
</script>

混入對象中的console.log均被執(zhí)行了，實(shí)現(xiàn)了邏輯或功能的復(fù)用。

那么有個(gè)問題，如果很多個(gè)組件同時(shí)使用同一個(gè)混入對象，這時(shí)候都要重復(fù)一個(gè)步驟，就是先導(dǎo)入混入對象，然后再使用，類似如下

<script>
import myMixins from "../mixins";
export default {
  mixins: [myMixins]
};
</script>

這樣未免有點(diǎn)繁瑣，且代碼冗余，此時(shí)我們可以使用全局混入來優(yōu)化這個(gè)問題。

全局混入

混入也可以進(jìn)行全局注冊。使用時(shí)格外小心！一旦使用全局混入，它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí)，這可以用來為自定義選項(xiàng)注入處理邏輯。

在main.js中通過Vue.mixin()引入混入對象即可全局使用（作用于該Vue實(shí)例下的所有組件）

import mixin from './mixins';
Vue.mixin(mixin)

效果與在每個(gè)組件中單獨(dú)引入混入對象相同，這便是全局混入。

注意

請謹(jǐn)慎使用全局混入，因?yàn)樗鼤绊懨總€(gè)單獨(dú)創(chuàng)建的 Vue 實(shí)例 (包括第三方組件)。大多數(shù)情況下，只應(yīng)當(dāng)應(yīng)用于自定義選項(xiàng)，就像上面示例一樣。推薦將其作為插件發(fā)布，以避免重復(fù)應(yīng)用混入。

到此這篇關(guān)于vue混入mixin使用特點(diǎn)的文章就介紹到這了,更多相關(guān)vue混入mixin內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論