ArkUI 自定義組件

基礎入門

組件可以把一段代碼封裝起來，目的是提高這一段代碼的復用率，並且也可以減少開發人員多次編寫相同的代碼。一旦組件定義好了之后，在頁面中只需要通過<element /> 標簽引入進來就可以了。

快速認識 Vue 組件。

在項目中創建一個用於存放組件的文件夾 components。目前項目文件夾的結構是這樣的：

組件與頁面一樣都需要 hml、js、css 三個文件：

<div class="container">
    <text>{{ msg }}</text>
</div>

export default {
    data: {
        msg: 'This is a component.'
    }
}

<element />標簽包含兩個屬性：name 和 src：

1. name 屬性指自定義組件名稱（非必填），組件名稱對大小寫不敏感，默認使用小寫。若沒有設置 name 屬性，則默認使用 hml 文件名作為組件名。
2. src 屬性指自定義組件 hml 文件路徑（必填）。

在頁面中引入組件：

<element name="DemoComp" src="../../../components/demo/index.hml"></element>

<div class="container">
    <!-- DemoComp 組件 -->
    <DemoComp></DemoComp>
    <text>
        This is a page.
    </text>
</div>

！注意：組件名最好使用大駝峰命名法，主要是用於區別開基礎組件名，也是為了提高可閱讀性。

Props

組件可以接收一些參數，跟函數一樣有參數，這樣可以進行一些組件的配置，從而達到不一樣的效果。

組件接收參數的接口就是 Props，實際上它是一個對象，可以有許多類型的屬性：String，Number，Boolean，Array，Object，Function。

！注意：Props 的屬性采用駝峰命名法，在 HML 文件中，對應的屬性名必須使用短橫線分隔命名法。

定義兩個 Props 屬性：imgSrc 和 size。

export default {
    props: {
        imgSrc: {
            // imgSrc 屬性的默認值，不傳遞參數時使用默認值。
            default: 'https://pic.cnblogs.com/avatar/2271881/20210617130249.png'
        },
        size: {
            default: 50
        }
    }
}

<div class="container" style="height: {{ size }} px; width: {{ size }} px;">
    <image class="img" src="{{ imgSrc }}"></image>
</div>

在 HML 中引入組件：

<element name="Avatar" src="../../../components/avatar/index.hml"></element>

<div class="container">
    <Avatar></Avatar>
    <text>
        This is a page.
    </text>
</div>

頁面成功顯示了剛剛自定義的頭像組件。現在，我們修改組件的 imgSrc 和 size 屬性：

<Avatar size="150" img-src="https://img1.baidu.com/it/u=1723224959,3151955398&fm=26&fmt=auto"></Avatar>