第5章 組件應用

第5章

組件應用5.1

組件基礎概念獨立可復用根組件Root每個組件是完整的Vue實例,支持data、me-thods、生命周期鉤子等配置組合嵌套Header組件Main組件Footer組件通過組件樹構建復雜界面,實現功能模塊的高度復用接口通信PaginationArticleList通過props和events進行組件間數據傳遞,降低系統耦合度5.1.1基本使用方法組件定義與使用組件復用關鍵規則data必須為函數組件中data選項必須聲明為函數而非對象每次實例化返回全新數據副本,確保狀態獨立為什么不能用對象對象形式會導致所有實例共享同一數據引用造成狀態污染,破壞組件封裝性使用ponent0)定義組件組件可接收data、computed、methods等選項(el除外)注冊后以自定義元素方式使用關鍵語法要求ponent(組件名",{data,template,..)5.1.3組織結構局部注冊全局注冊使用ponent()注冊注冊后可在應用任何組件模板中使用適合通用性強的基礎組件在組件的components選項中注冊僅限父組件模板中使用適合特定場景的專用組件ponent("ButtonCounter',{...)components:(ButtonCounter:MyComponent}命名規則自閉合限制注冊用PascalCase,HTML模板中用kebab-case引用如ButtonCounter引用時寫HTML模板中不能使用自閉合寫法非HTML模板中鼓勵自閉合以表示無內容組件5.1.4

鉤子函數setup0取代beforeCreate和created,封裝大部分組件代碼onBeforeMountonMounted按需導入鉤子函數需從vue中導入,保持項目輕量化組件掛載前后的鉤子importonBeforeUpdateonMounted,onUpdated}fromvue其他鉤子onActivated/onDeactivated(keep-alive相關)onErrorCaptured(錯誤捕獲)數據更新前后的鉤子onUnmounted數據卸載前后的鉤子組件卸載前后的鉤子setup0是CompositionAP的入口,取代了beforeCreate和created5.2.1

通過props向子組件傳遞數據定義props傳遞數據使用數據21在子組件props選項中聲明自定義屬性props:['title']子組件內部可直接訪問prop值模板中通過插值表達式渲染父組件通過屬性向子組件傳值作為自定義屬性寫在組件元素上案例:傳統文化與生態保護子組件SeasonCard定義seasonData屬性父組件傳入節氣數據對象子組件展示節氣名稱、氣候特征、傳統習俗、生態保護信息5.2.2

跨層級傳遞

5.2.3監聽事件5.2.2Provide/Inject5.2.3$emit自定義事件祖先組件子組件觸發this.$emit(\使用provide提供數據provide(\使用inject注入數據觸發事件并傳遞參數后代組件父組件監聽通過v-on指令監聽子組件事件接收子組件傳遞的數據constdata=inject(\注意事項適用場景跨多層組件傳遞,避免逐層傳遞props如主題切換、用戶信息共享注意事項事件名不自動轉換大小寫觸發名與監聽名需完全匹配provide/inject實現跨層級傳遞,$emit實現子→父通信5.3插槽5.3.1基本插槽5.3.2編譯作用域5.3.3后備內容子組件中用聲明占位符插槽內容在父組件作用域編譯slot內可設置默認內容父組件傳入的內容替換占位位置可訪問父組件的數據父組件未提供內容時顯示默認值實現組件結構固定、內容可定制不能訪問子組件的數據提供內容時覆蓋默認值子組件模板父組件傳入內容替換占位符聲明默認內容→父組件未傳入→顯示默認內容5.3.4具名插槽5.3.5作用域插槽5.3.6動態插槽名子組件通過slot綁定數據父組件用v-slot:default='slotProps接收解決插槽內容需訪問子組件數據的問題slotProps包含所有插槽propslot元素用name屬性定義命名插槽V-slotheader指定內容分發目標一個組件可包含多個具名插槽v-slot:[dynamicSlotName]動態指定插槽名根據運行時變量決定內容分發位置具名插槽→多區域分發,作用域插槽→子→父數據傳遞5.4.1動態組件統一渲染入口ComponentAComponentBcurrentComponent切換狀態管理優化代碼復用提升動態組件=component標簽+is屬性+可選KeepAlive緩存性能優化5.4.2

異步組件代碼分割性能優化大型應用拆分為多個小塊減少初始包體積,加速實現懶加載頁面渲染按需加載錯誤邊界僅在需要時加載組件,支持加載狀態和錯誤處理,提升用戶體驗節省帶寬資源方式2(Vue3.2+)直接返回Promise簡潔寫法,適用于簡單場景方式1使用defineAsyncComponent包裝import{defineAsyncComponent}from"vue"5.5

案例5.5.1日歷組件5.5.2彈出層組件核心功能年月切換、日期選擇、閏年判斷月份首日星期計算、空格填充對齊設計思路彈窗獨立于業務模板,掛載到body通過JavaScript動態創建和銷毀實現步驟創建create()函數接收組件配置創建實例并掛載到body組件關閉時移除DOM并銷毀實例調用方式create(Notice,(title,mes