建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹vue mixins指的是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、陸河網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
vue mixins是一種分發(fā)Vue組件中可復(fù)用功能的非常靈活的方式，混合對(duì)象可以包含任意組件選項(xiàng)，當(dāng)組件使用混合對(duì)象時(shí)，所有混合對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
mixins
混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。
混合對(duì)象可以包含任意組件選項(xiàng)。
當(dāng)組件使用混合對(duì)象時(shí)，所有混合對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
mixins理解
組件在引用之后相當(dāng)于在父組件內(nèi)開(kāi)辟了一塊單獨(dú)的空間，來(lái)根據(jù)父組件props過(guò)來(lái)的值進(jìn)行相應(yīng)的操作，單本質(zhì)上兩者還是涇渭分明，相對(duì)獨(dú)立。
而mixins則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充了。
單純組件引用：
父組件 + 子組件 >>> 父組件 + 子組件
mixins：
父組件 + 子組件 >>> new父組件
有點(diǎn)像注冊(cè)了一個(gè)vue的公共方法，可以綁定在多個(gè)組件或者多個(gè)Vue對(duì)象實(shí)例中使用。另一點(diǎn)，類似于在原型對(duì)象中注冊(cè)方法，實(shí)例對(duì)象即組件或者Vue實(shí)例對(duì)象中，仍然可以定義相同函數(shù)名的方法進(jìn)行覆蓋，有點(diǎn)像子類和父類的感覺(jué)。
mixins的使用
方法的復(fù)用
html
js
Vue.component('child',{
template:`child component
`,
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
Vue.component('kid',{
template:`kid component
`,
methods:{
foo(){
console.log('Kid foo()'+this.msg++)
}
}
})在借助mixins之前，在兩個(gè)不同的組件的組件中調(diào)用foo方法，需要重復(fù)定義，倘若方法比較復(fù)雜，代碼將更加冗余。若借助mixins，則變得十分簡(jiǎn)單：
let mixin={
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('hello from mixin!----'+this.msg++)
}
}
}
var child=Vue.component('child',{
template:`child component
`,
mixins:[mixin]
})
Vue.component('kid',{
template:`kid component
`,
mixins:[mixin]
})雖然此處，兩個(gè)組件用可以通過(guò)this.msg引用mixins中定義的msg，但是，小編嘗試過(guò)，兩個(gè)組件引用的并不是同一個(gè)msg，而是各自創(chuàng)建了一個(gè)新的msg。如果在組件中定義相同的data，則此處會(huì)引用組件中的msg，而非mixins中的。
以上是“vue mixins指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站欄目：vuemixins指的是什么
網(wǎng)站地址：http://fisionsoft.com.cn/article/phdsje.html
