混入

我們先來看看vue官方是怎么介紹的

混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

官方文檔說的很詳細(xì)，通俗易懂的話來說一個.vue文件由template，script，style組成，混入的方法可以把mixin這個對象和.vue文件的script里面的內(nèi)容“混入”（mixin對象的結(jié)構(gòu)和.vue的script里面的結(jié)構(gòu)一樣），既此組件既可以調(diào)用組件內(nèi)部的script，也可以調(diào)用混入對象。

場景運(yùn)用：

有兩個非常相似的組件，他們的基本功能是一樣的，但他們之間又存在著足夠的差異性。他們可能會公用一部分業(yè)務(wù)邏輯，但是他們的頁面結(jié)構(gòu)又不相同。這個時候就可以使用mixin來讓代碼復(fù)用。（類似于JS庫，暴露出來的方法達(dá)到函數(shù)復(fù)用的效果。又區(qū)別于JS庫，它繼承了vue中script所有對象，包括生命周期，data，methods）

話不多說請看基礎(chǔ)實(shí)例：

這是demo的文件結(jié)構(gòu)

寫在mixin.js

const mixin= {
    data() {
        return {
            name: '初始名字：張三',
            mixinMsg: 'mixinMsg'
        };
    },
    methods: {
        // 獲取mixin中的msg
        getMixinMsg() {
            alert(
                '我是mixin.js中的getmsg方法，mixinmsg的數(shù)據(jù)是' + this.mixinMsg
            );
        },
        // 獲取home中的homeMsg
        getHomeMsg() {
            alert(
                '我是mixin.js中的getHomeMsg方法，HomeMsg的數(shù)據(jù)是' + this.homeMsg
            );
        }
    },
    created() {
        alert('在mixin中vue的data、生命周期、方法等都可以使用');
    }
};

export default mixin;

mixin中，暴露一個常數(shù)Vrbtmixin ，Vrbtmixin 是一個對象，里面的結(jié)構(gòu)和.vue文件的script相同

寫在home.vue中

<template>
  <transition name="fade">
    <div class="wrap">
      <h1>Home頁面</h1>
      <h3 @click="goRule">跳轉(zhuǎn)路由</h3>
      <!--主要內(nèi)容-->
      <div class="content">
        <div @click="getMixinData">1.獲取mixin中的name</div>
        <div @click="test">2.調(diào)用mixin.js中的getMixinMsg方法</div>
        <div @click="getHomeMsg">3.獲取home.vue中的homeMsg</div>
        <div @click="changeMixinMsg">4.改變mixin中的name</div>
      </div>
    </div>
  </transition>
</template>
<script>
import mixin from '../js/mixin';
export default {
    mixins: [mixin],
    data() {
        return {
            homeMsg: 'homeMsg'
        };
    },
    methods: {
        getMixinData() {
            alert('mixin中的name為：' + this.name);
        },
        test() {
            this.getMixinMsg();
        },
        changeMixinMsg() {
            this.name = '李老二';
            alert('mixin中的name改變?yōu)椋? + this.name);
        },
        goRule() {
            this.$router.push('/rule');
        }
    },
    created() {}
};
</script>
<style lang="less" scoped>
img {
    opacity: 0;
}
.wrap {
    // background-color: white;
    .content {
        div {
            height: 1rem;
            // width: 1rem;
            background-color: aqua;
            margin-top: 0.4rem;
            text-align: center;
            line-height: 1rem;
        }
    }
}
</style>

引入mixin.js，然后注冊 mixins: [mixin],

寫在rule.vue中

<template>
  <transition name="fade">
    <div class="wrap">
      <!--主要內(nèi)容-->
      <div class="content">
        <div @click="getMixinData">獲取mixin.js中的name</div>
      </div>
    </div>
  </transition>
</template>
<script>
import mixin from '../js/mixin';
export default {
    mixins: [mixin],
    name: 'zt',
    data() {
        return {
            homeMsg: 'homeMsg'
        };
    },
    methods: {
        getMixinData() {
            alert('mixin中的name為：' + this.name);
        }
    }
};
</script>
<style lang="less" scoped>
.wrap {
    // background-color: white;
    .content {
        div {
            height: 1rem;
            // width: 1rem;
            background-color: yellowgreen;
            margin-top: 0.4rem;
            text-align: center;
            line-height: 1rem;
        }
    }
}
</style>

我們這里讓2個組件home.vue 和 rule.vue都混合了mixin.js，一會我們可以通過對比來證明2個組件混合了相同的mixin.js但是2個組件不是共用關(guān)系，他們彼此沒有影響。

效果

我們在home頁面中：

home頁面生命周期，按鈕1，按鈕2的演示

1.我們可以看到我們寫在mixin.js中的生命周期created()已經(jīng)調(diào)用
2.點(diǎn)擊第一個按鈕，我們獲取到了mixin.js中data中的name
3.點(diǎn)擊第二個按鈕，我們調(diào)用到了mixin.js中的getMixinMsg方法

點(diǎn)擊第三個按鈕

mixin.js中

1.這次我們第三個按鈕是通過home.vue調(diào)用mixin.js的getHomeMsg方法，發(fā)現(xiàn)不但home.vue可以調(diào)用到mixin.js的數(shù)據(jù)和方法，mixin.js也可以調(diào)用home.vue的數(shù)據(jù)和方法。（更加理解“混入”）

改變mixin.js的數(shù)據(jù)

1.點(diǎn)擊第四個按鈕，我們改變了mixin.js中的name數(shù)據(jù)，再點(diǎn)擊第一個按鈕，發(fā)現(xiàn)數(shù)據(jù)已經(jīng)改變。

跳轉(zhuǎn)到rule組件后，mixin的name為初始（其實(shí)本身并不共用）

注意：當(dāng)本組件與mixin有同名方法或同名數(shù)據(jù)時，有先調(diào)用本組件的方法或數(shù)據(jù)，混入的部分失效

總結(jié)：

其實(shí)這個demo就是想展示mixin的用法，需要一邊結(jié)合代碼一邊看效果。主要還是一個“混入”的思想，理解了這個“混入”的思想，其實(shí)也很簡單。就是代碼中的相同業(yè)務(wù)，你把它剝離出來，封裝后單獨(dú)寫個mixin，到需要用的組件時再混入進(jìn)去。代碼維護(hù)方便，復(fù)用率高，書寫簡潔。

Mixin對于封裝一小段想要復(fù)用的代碼來講是有用的。對你來說Mixin當(dāng)然不是唯一可行的選擇：比如說高階組件就允許你組合相似函數(shù)，Mixin只是的一種實(shí)現(xiàn)方式。我喜歡Mixin，因?yàn)槲也恍枰獋鬟f狀態(tài)，但是這種模式當(dāng)然也可能會被濫用，所以，仔細(xì)思考下哪種選擇對你的應(yīng)用最有意義吧！