vue mixins是什麼

vue mixins是一種分發Vue元件中可重複使用功能的非常靈活的方式，混合物件可以包含任意元件選項，當元件使用混合物件時，所有混合物件的選項將被混入該元件本身的選項。

本教學操作環境：windows7系統、Vue2.9.6版，此方法適用於所有品牌電腦。

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(&#39;Child foo()&#39;+this.msg++)
        }
    }
})
 
Vue.component(&#39;kid&#39;,{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Kid foo()&#39;+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(&#39;kid&#39;,{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

雖然此處，兩個元件用可以透過this.msg引用mixins中定義的msg，但是，小編嘗試過，兩個元件引用的並不是同一個msg，而是各自創造了一個新的msg。如果在元件中定義相同的data，則此處會引用元件中的msg，而非mixins中的。

以上是vue mixins是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！