前言
如果你使用過sass,那你對Mixin應該有過了解。Mixin有點像C語言的宏(macro),是可以重用的代碼塊。
使用場景
在vue中可能存在兩個非常相似的組件,它們的組件選項大同小異,這時候就可以用到Mixins,避免重復書寫兩次同樣的內容。
場景一
model和confirm組件,雖然這兩個組件的html結構不一樣,但是組件選項中的一些方法是相同的,比如隱藏/顯示。-
場景二
tabs組件的內容區(qū)域,在一些需求場景中,標題一和標題二對應的內容區(qū)域中,有一部分html結構可能是完全相同的,只是請求數(shù)據(jù)的參數(shù)不同。此時我們可以將公共部分封裝成組件,但是僅此還不夠,我們封裝的組件只是用來渲染數(shù)據(jù)的,也就是說,標題一和標題二對應的內容區(qū)域的組件仍然是兩個。
當然也可以寫成一個,但是需要根據(jù)tab標題的變化傳遞不同的參數(shù),當參數(shù)比較多就不容易維護了。
所以這里使用Mixins封裝通用的組件選項,這樣在不同的內容組件中,分別引用公共組件和Mixins,即方便維護,又有區(qū)分度。
場景三
需求上有通用部分,比如增刪改查,在不同組件中有不同的url和參數(shù),但是邏輯是相同的,這樣也可以使用Mixins封裝通用部分。
語法
混合還提供了選項合并,全局混合等功能,具體可查閱官方文檔