将多次用到的重複代碼封裝成新元件，在工程中多次調用，進而提高代碼的複用性。自定義元件通過 element 标簽引入到宿首頁面。
相對于官方定義的元件，作為一個開發者封裝的元件就是一個自定義元件。官方的元件有 button、input、menu 等，👉官方基礎元件文檔。
鴻蒙元件概念和 Vue 元件概念極為相似，推薦閱讀筆者另一個播客文章：👉[Vue]元件是什麼以及如何使用元件。
在這裡，先示範一個非常簡單的封裝元件的案例。在工程項目中，建立一個用于存放元件的檔案夾 components，接着建立一個 demo 檔案夾。
現在，你的工程項目檔案夾的結構可能是這樣的：
元件與頁面一樣，都需要三個檔案，即 hml、js、css。
現在你需要将封裝好的新元件引入到寄首頁面中，需要用到非常重要的标簽 —— <code>element</code>，element 包含兩個屬性，name 和 src。
name 屬性指自定義元件名稱(非必填)，元件名稱對大小寫不敏感，預設使用小寫。若沒有設定 name 屬性，則預設使用 hml 檔案名作為元件名。
src 屬性指自定義元件 hml 檔案路徑(必填)。
！注意：元件名最好使用大駝峰命名法，主要是用于差別開基礎元件名，也是為了提高可閱讀性。
頭像的元件需要有一個 image 标簽：
定義元件的時候我們發現并不夠靈活，我希望引入頭像元件之後，可以為子元件傳遞圖檔位址。而自定義元件可以通過 <code>Props</code> 聲明屬性，它是你可以在自定義元件上注冊的一些自定義屬性，它是寄首頁面向自定義元件通信的接口。
Props 支援類型包括：String，Number，Boolean，Array，Object，Function。在自定義元件中，Prop 名采用 camelCase (駝峰命名法) 形式定義屬性；在寄首頁面使用自定義元件，并傳遞參數時需要使用 kebab-case (短橫線分隔命名) 形式。即當屬性compProp在父元件引用時需要轉換為comp-prop。
在元件的 js 檔案裡，我們需要定義兩個 Prop，一個用于代替 image 标簽的 src ，一個是用來定義圖檔大小的 size：
元件的樣式我們就使用内聯 style ，圖檔的 src 我們使用 Props 裡的 imgSrc 來代替：
Props 的單向性，更多細節閱讀👉[鴻蒙]鴻蒙開發之元件（二）：Props
到這裡，我們就封裝了一個元件了，接着就是引入它：
頁面成功顯示了剛剛自定義的頭像元件。現在，我們修改元件的 imgSrc 和 size 屬性：