vuemixins指的是什么

這篇文章主要介紹vue mixins指的是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網站建設、域名、網頁空間、網站托管、服務器租用、企業(yè)網站設計、陸河網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

vue mixins是一種分發(fā)Vue組件中可復用功能的非常靈活的方式，混合對象可以包含任意組件選項，當組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。

mixins

混合 (mixins) 是一種分發(fā) 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:`<h2 @click="foo">child component</h2>`,
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})
 
Vue.component('kid',{
    template:`<h2 @click="foo">kid component</h2>`,
    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:`<h2 @click="foo">child component</h2>`, 
        mixins:[mixin]
})
Vue.component('kid',{ 
        template:`<h2 @click="foo">kid component</h2>`, 
        mixins:[mixin]
})

雖然此處，兩個組件用可以通過this.msg引用mixins中定義的msg，但是，小編嘗試過，兩個組件引用的并不是同一個msg，而是各自創(chuàng)建了一個新的msg。如果在組件中定義相同的data，則此處會引用組件中的msg，而非mixins中的。

以上是“vue mixins指的是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標題：vuemixins指的是什么
標題網址：http://muchs.cn/article24/phdsje.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站建設、外貿網站建設、標簽優(yōu)化、網站導航、網站設計公司、小程序開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網站優(yōu)化排名