Vue知識點總結(22)——mixin混入技術（超級詳細）

在web前端的發展中，組件化、模塊化的思想一直在貫徹目前的技術發展。
組件的一大重要做用就是可複用，我封裝完組件以後，能夠在任何地方重複使用個人組件，不須要屢次開發。正所謂，一次封裝，屢次使用。

然而組件和組件之間，其實也有不少的功能能夠複用。

咱們簡單舉個例子，一個提示框組件，一個模態框組件。它們在展現形態上有所不一樣，可是它們觸發的機理基本同樣，都是經過觸發條件的出現，改變v-if的值，從而實現組件的展現。

也就是說，雖然它們兩個組件間有邏輯重複的功能，這就能夠進行復用，從而提升咱們的開發效率。

vue提供了一套可複用&組合的混入偷懶技術mixin。

爲何叫它偷懶技術呢，由於複用原本就是爲了「偷懶」，更加專一有效操做，將無效操做盡可能減小。

混入 (mixin) 提供了一種很是靈活的方式，來分發 Vue 組件中的可複用功能。一個混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被「混合」進入該組件自己的選項。

先來個小例子，展現一下mixin的使用。

   <div id="app">
        {{msg}}
    </div>
    <script>
        const myMixin = {
            data () {
                return {
                    msg:123
                }
            },
            created () {
                this.sayHello();
            },
            methods: {
                sayHello(){
                    console.log('hello mixin');
                }
            }
        }

        new Vue({
            el:'#app',
            data:{
                title:'Ray'
            },
            mixins: [myMixin],
        });
    </script>

咱們寫了一個局部組件myMixin，在一個實例化的vue中，咱們寫了一個和data同級的mixins屬性，以數組的形式放入咱們以前寫的局部組件的名字。在這裏也能夠看出，mixins中能夠放的不止一個組件，也就是說，咱們能夠將咱們想複用的任何組件都放進入。

而後咱們看下頁面的渲染。

它成功的執行了myMixin中的方法和鉤子函數的內容。
這是mixin最基本的使用。

下面咱們以一個開發中的實際案例，展現一下mixin在實際開發中的使用。

const toggleShow = {
    data () {
        return {
            isShow:false
        }
    },
    methods: {
        toggleShow(){
            console.log("點擊！");
            this.isShow = !this.isShow;
        }
    }
}
const Model = {
    template:`
        <div v-if='isShow'>
            <h3>模態框組件</h3>    
        </div>
    `,
    // 局部的mixin
    mixins: [toggleShow]
}
const Toast = {
    template:`
        <div v-if='isShow'>
            <h2>提示框組件</h2>    
        </div>  
    `,
    // 局部的mixin
    mixins: [toggleShow]
}
new Vue({
        el:'#app',
       data:{

       },
       components: {
           Model,
           Toast
       },
       template:`
        <div>
            <button @click='handleModel'>模態框</button>
            <button @click='handleToast'>提示框</button>
            <Model ref='model'></Model>
            <Toast ref='toast'></Toast>    
        </div>
       `,
       methods:{
           handleModel(){
               this.$refs.model.toggleShow();
           },
           handleToast(){
               this.$refs.toast.toggleShow();
           }
       }
    });
</script>

如今有一個局部組件Model爲模態框，一個局部組件Toast爲提示框。
它們看起來不同，用法不同，可是邏輯同樣，都是切換v-if的boolean值。
而後咱們又寫了一個局部組件toggleShow，這個組件就是被咱們重複複用的組件，用於提供模態框和提示框都須要的邏輯功能。

而且咱們在Model和Toast都經過 mixins: [toggleShow] 調用了這個被複用組件。

而後咱們在一個實例化的vue中使用一下這兩個組件，而且給他們綁定ref屬性，用於調用它們的toggleShow方法，實現展現的效果。

咱們看一下頁面的實際渲染狀況：

沒有任何問題，經過咱們點擊按鈕，模態框和提示框都完成了相應的展現。
咱們實現了從toggleShow組件中抽離功能，分發給Model和Toast組件的效果。

這就是mixin在咱們實際的工做開發中的使用，仍是很是好用的，能夠將組件中能夠被複用的功能，繼續抽離出來，分發給須要的組件。