前言

最近重新夯實Vue3

目前已經(jīng)完結(jié)第一部分：**基礎(chǔ)部分**^[1]

本文是第二部分：深入組件

我將這部分內(nèi)容吸收整理成8張腦圖，一來可以快速了解Vue3組件，二來方便以后查看，具體如下??

腦圖

注冊組件

??無論是全局注冊和局部注冊，都是提供一個組件名和一個組件配置對象

組件Props

??組件的配置選項props作用是實現(xiàn)父子通信，而且它本質(zhì)是proxy

非屬性特性

??非屬性的特性指的是：組件中沒有定義在props或emits選項中的特性，這些特性會有繼承的特點

自定義事件

??利用props可以實現(xiàn)父子通信，通過自定義事件我們可以實現(xiàn)子父通信，在子組件中通過$emit()派發(fā)事件并傳遞參數(shù)，在父級組件通過監(jiān)聽事件

插槽slot

??插槽是一種內(nèi)容分發(fā)技術(shù)，可以在組件模板中使用<slot>占位

依賴注入：Provide和Inject

??作用是更方便的實現(xiàn)跨層級傳參；用法是在祖輩上Provide，在后代上Inject

動態(tài)組件和異步組件

??動態(tài)組件其實時通過<component>元素實現(xiàn)，通過它的is屬性切換不同的組件；而異步組件的注冊跟正常注冊的注冊類似，只是它是通過defineAsyncComponent方法定義一個異步組件配置

模板引用和控制更新

??模板引用，使用ref屬性為子組件或HTML元素指定引用ID，通過this.$refs.xxx獲取到對應(yīng)ID為xxx的組件或HTML元素；正常情形下，不用自己強(qiáng)制控制更新，因為有響應(yīng)性系統(tǒng)，但極端情況下，可以使用$forceUpdate強(qiáng)制更新,但還是不推薦

附件

我已將以上原圖及源文件已上傳github：github.com/jCodeLife/m…^[2]

一來方便大家批量下載，二來可以根據(jù)自己的想法和習(xí)慣進(jìn)行修改

END

以上是這次Vue組件相關(guān)的所有內(nèi)容

如有問題，歡迎留言告知，感謝~