vue 2.0 混合的思考

前言

如果你使用過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封裝通用部分。

語法

混合還提供了選項合并,全局混合等功能,具體可查閱官方文檔

參考

在vue中使用Mixin

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容,還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,168評論 0 29
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,741評論 25 709
  • 基于類的視圖 Django中的視圖是一個可調用對象,它接收一個請求然后返回一個響應。這個可調用對象不僅僅限于函數(shù),...
    蘭山小亭閱讀 4,756評論 1 13
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,040評論 4 61
  • 已經(jīng)有很長一段時間不愿意寫東西,只因為每次投入的寫之后,情緒會有一個很大的起伏。 而最近剛剛恢復寫東西的習慣,就看...
    小飛俠303閱讀 435評論 0 2

友情鏈接更多精彩內容