前言

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

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

混入

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

混入注意(重名情況)

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

局部混入

全局混入

定義及全局注冊

調(diào)用

繼承

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

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

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

總結(jié)

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

最新評論