前言

Vue中的混入(mixin)是一個(gè)比較簡(jiǎn)單的知識(shí)點(diǎn)。熟悉CSS預(yù)處理語(yǔ)言比如less、sass的開(kāi)發(fā)者對(duì)mixin肯定很熟悉。Vue中的mixin幾乎跟less等里面的mixin一樣，都是將定義好的一些功能原樣注入Vue組件當(dāng)中，也有些類(lèi)似面向?qū)ο缶幊讨械睦^承(我只是說(shuō)類(lèi)似:) )。

mixin是一個(gè)對(duì)象，這個(gè)對(duì)象的屬性可以是Vue實(shí)例或者組件實(shí)例的生命周期鉤子、屬性等，當(dāng)全局混入或者混入到組件后，Vue實(shí)例或者組件實(shí)例就擁有了mixin中定義的生命周期鉤子、屬性等等。如果兩者中有重復(fù)的，會(huì)按照一定的規(guī)則合并。

混入

• 將多個(gè)vue文件內(nèi)重復(fù)使用的功能代碼，提取成單個(gè)js文件，在需要使用的地方進(jìn)行調(diào)用即可。
• 在一個(gè)js文件內(nèi)定義一個(gè)對(duì)象, 在對(duì)象中可以寫(xiě) vue文件內(nèi)的 data 、methods、components等所有<script>中可以定義的代碼。

混入注意(重名情況)

• 組件中的 data變量名 和 混入中的 data變量 名, 發(fā)生重名時(shí), 以組件為準(zhǔn);
• 組件中的 methods，computed，wath名稱(chēng) 和 混入中的 methods，computed，wath名稱(chēng) 名, 發(fā)生重名時(shí), 以組件為準(zhǔn);
• 組件中的 生命鉤子函數(shù) 和 混入中的 生命鉤子函數(shù) 名, 發(fā)生重名時(shí), 都會(huì)執(zhí)行, 但是組件中的鉤子函數(shù)優(yōu)先執(zhí)行 ;

局部混入

全局混入

定義及全局注冊(cè)

調(diào)用

繼承

• 注意：這里是不適合多繼承的，多繼承問(wèn)題出現(xiàn)會(huì)多。
• extends除了可以繼承 .vue 文件，而且可以和 mixin一樣使用 js文件內(nèi)的對(duì)象。
• extends繼承 .vue 文件內(nèi)的 template內(nèi)的html是無(wú)法繼承的

混入和繼承的區(qū)別

• 先看看官方文檔的定義, 其實(shí)兩個(gè)都可以理解為繼承;
• mixins接收對(duì)象數(shù)組（可理解為多繼承）;
• extends接收的是對(duì)象或函數(shù)（可理解為單繼承）。
• 注意: 如果一個(gè)組件, 既使用 繼承, 又使用 混入, 它們二者中如果有重名, 則混入會(huì)覆蓋繼承

總結(jié)

到此這篇關(guān)于Vue混入和繼承的文章就介紹到這了,更多相關(guān)Vue混入和繼承內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論