vue---mixins的用法

相信你們都用過less、sass等預編譯器。它們中也有mixins，用法也很簡單，例如Less中：

.box{
  border:1px solid red;
  padding:10px;    
}
.mixin{
  .box;
  margin:10px;    
}

編譯以後就成了：

.box{
  border:1px solid red;
  padding:10px;    
}
.mixin{
  border:1px solid red;
  padding:10px;
  margin:10px;    
}

這樣就減小了寫的代碼量。也達到了公用相一樣式的目的。

 

而 vue的mixins也是一樣的道理。使用公用的內容，達到指定或者全部的實例都共享這些內容。

 

那麼，vue中的mixins能夠定義哪些內容呢？

官網的說明：混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被混入該組件自己的選項。

大體意思就是：

1） 混入對象的內容必須是一個對象。

2） 當使用混入時，相同的內容都會合並。

3） 數據對象若是有相同的，則以被混入的對象中data數據爲準

後面會詳細解釋一下這幾個意思。

HTML：

<div id="box">{{name}}：{{age}}，{{sex}}，{{print()}}，{{say}} </div>

JS：

var mix={
    el:"#box",
    data:{
        age:18,
        sex:'female',
        name:'八戒'
    },
    mounted:function(){
        this.age++;
        console.log(this.age)//11
    },
    computed:{
        say:function(){
            return '我在mix裏面'
        }
    },
    methods:{
        print:function(){
            return '這裏是mix';
        }
    }
}

new Vue({
//    el:"#box",
    mixins:[mix],
    data:{
        age:10
    },
    mounted:function(){
        this.age+=2;
        console.log(this.age)//13 this.sex='male';
    },
    computed:{
        say:function(){
            return '我在new Vue裏面'
        }
    },
    methods:{
        print:function(){
            return '這裏是new Vue';
        }
    }
})

結果：

注意：

1） mixins 這個屬性接收的是 一個數組 能夠有多個mixins的內容，好比：mixins：[ mix1, mix2 , mix3]，前提是定義了這些混入對象，否則就會報錯。

2） 從上個栗子能夠看出，只要是屬於實例（或組件）的內容都是能夠混入的，包括 el  。。。  

3） 混入對象中若是有生命週期的 鉤子 ，那麼 混入對象  和 被混入對象的鉤子都會被執行一遍，並且 混入對象的鉤子將在  實例（或組件）自身鉤子以前先執行。由於同名鉤子函數將混合爲一個數組，所以都將被調用。

4） 混入的方法methods，計算屬性computed ，組件components，數據data等，只要值是爲對象的，都是會被合併的。而且若是有相同的鍵值 ， 則會以 被混入對象中的 鍵值 即 以實例（或對象）中的內容爲準。

4） 好比在 data 中 age 這一項是相同的，這個時候是以 被混入 的對象中數據 優先 。

5） 因此 age 是 13 就很好理解了。 首先  被混入的對象的data數據優先，那麼 age就是 10 ；而後 到達生命週期 mounted 的時候，混入的對象中的代碼，執行一次，被混入的實例中的代碼，再執行一次。 因此最終的結果就是13。

 

全局混入

固然，mixins也有全局混入的方法，不過這樣會讓全部的實例都共享混入的內容。混入的規則仍是同樣的。

Vue.mixin({
   //這裏是要混入的內容
})

 請謹慎使用全局混入的方法。畢竟只要使用了全局混入，全部實例都會共享  混入的內容  無論你是否   添加了  mixins 這個屬性選項。

 

自定義選項合併策略

詳細的能夠查看官網 自定義選項合併策略