元件化的vue給人的印象往往是快而小，簡潔明瞭，但隨著業務量和判斷邏輯的堆疊產生，可能也會誕生一些很大的元件。
乙個元件的html的**量超過200行應該就算很大的元件了，今天對乙個超過400行的元件如何進行優化來進行討論。
提高復用率
在乙個tob的工單介面，乙個工單卡片的元件可以被任何乙個狀態頁去組裝，很明顯card元件的復用性是很高的。
可以考慮拆分後的子元件是否可以進行元件的引用。
可讀性與以維護
乙個超過400行的**摻雜複雜的邏輯與狀態判斷，可讀性不用說也是很差的，想定位乙個位置由於**量的原因就變得異常複雜。
分層&&讓程式可讀
將原元件進行拆分為如圖所示的四部分，以card元件引入這四個子元件的形式，以減小整體**上帶來的影響。
其他彈出框等，可留在card元件中。
vue中拆分子元件和子路由的步驟
原理 利用import和export 也就是匯入和匯出 一 vue中拆分子元件 import cxheader from header.vue import cxslider from slider.vue 2.3.export default 後台登入 使用者管理 分類管理classfiy和add...
UI元件和容器元件的拆分
1.首先，以前面的todolist為例 以下是原來的todolist中的render函式中的內容，我們可以將元件中關於ui渲染頁面的封裝到乙個檔案中 render 2.在src目錄下新建乙個檔名為todolistui.js。將剛剛的render中的內容複製到todolistui裡面。3 這裡需要進一...
vue 說說你對vue元件的設計原則的理解
第一 容錯處理,這個要做好,極端場景要考慮到,不能我傳錯了乙個引數你就原地 第二 預設值 預設值 要有,一般把應用較多的設為預設值 第三 顆粒化,把元件拆分出來.第四 一切皆可配置,如有必要,元件裡面使用中文標點符號,還是英文的標點符號,都要考慮到 第五 場景化,如乙個dialog彈出,還需要根據不...