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>