vue中mixins的理解及應用

vue中mixins的理解及應用

vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的複用。最開始我一度認爲這個和組件好像沒啥區別。。後來發現錯了。下面咱們來看看mixins和普通狀況下引入組件有什麼區別？

mixins

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

mixins理解

組件在引用以後至關於在父組件內開闢了一塊單獨的空間，來根據父組件props過來的值進行相應的操做，單本質上二者仍是涇渭分明，相對獨立。

而mixins則是在引入組件以後，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合併。至關於在引入後，父組件的各類屬性方法都被擴充了。

• 單純組件引用：
  父組件 + 子組件 >>> 父組件 + 子組件
• mixins：
  父組件 + 子組件 >>> new父組件
  有點像註冊了一個vue的公共方法，能夠綁定在多個組件或者多個Vue對象實例中使用。另外一點，相似於在原型對象中註冊方法，實例對象即組件或者Vue實例對象中，仍然能夠定義相同函數名的方法進行覆蓋，有點像子類和父類的感受。

mixins的使用

方法的複用

html

<div id="app">
    <child></child>
    <kid></kid>
</div>

js

Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})
 
Vue.component('kid',{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log('Kid foo()'+this.msg++)
        }
    }
})

在藉助mixins以前，在兩個不一樣的組件的組件中調用foo方法，須要重複定義，假若方法比較複雜，代碼將更加冗餘。若藉助mixins，則變得十分簡單：

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('hello from mixin!----'+this.msg++)
        }
    }
}
var child=Vue.component('child',{ 
        template:`<h1 @click="foo">child component</h1>`, 
        mixins:[mixin]
})
Vue.component('kid',{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

雖然此處，兩個組件用能夠經過this.msg引用mixins中定義的msg，可是，小編嘗試過，兩個組件引用的並非同一個msg，而是各自建立了一個新的msg。若是在組件中定義相同的data，則此處會引用組件中的msg，而非mixins中的。

方法的覆蓋

若是在引用mixins的同時，在組件中重複定義相同的方法，則mixins中的方法會被覆蓋。

var child=Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    mixins:[mixin],
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})

此時，若單擊h1標籤，則在控制檯中打印"Child foo() 1" 三、合併生命週期此時，若單擊h1標籤，則在控制檯中打印"Child foo() 1"

合併生命週期

let mixin={
    mounted(){
        console.log('mixin say hi')//先輸出
    },
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('mixin foo()'+this.msg++)
        }
    }
}
let vm=new Vue({
    el:"#app",
    data:{
        msg: 2
    },
    mounted: function(){
        console.log('app say hi')//後輸出
    },
    methods:{
        foo(){
            console.log('Parent foo()'+this.msg)
        }
    }
})

經過上面的介紹，如今對mixins有了比較深刻的瞭解，在設計複雜組件時是頗有必要的。