前言

Vue中的混入(mixin)是一個比較簡單的知識點。熟悉CSS預處理語言比如less、sass的開發(fā)者對mixin肯定很熟悉。Vue中的mixin幾乎跟less等里面的mixin一樣，都是將定義好的一些功能原樣注入Vue組件當中，也有些類似面向對象編程中的繼承(我只是說類似:) )。

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

混入

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

混入注意(重名情況)

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

局部混入

全局混入

定義及全局注冊

調用

繼承

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

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

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

總結

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

最新評論