前言

将多次用到的重复代码封装成新组件，在工程中多次调用，从而提高代码的复用性。自定义组件通过 element 标签引入到宿主页面。

相对于官方定义的组件，作为一个开发者封装的组件就是一个自定义组件。官方的组件有 button、input、menu 等，??官方基础组件文档。

鸿蒙组件概念和 Vue 组件概念极为相似，推荐阅读笔者另一个播客文章：??。

起步

简单演示

在这里，先演示一个非常简单的封装组件的案例。在工程项目中，创建一个用于存放组件的文件夹 components，接着创建一个 demo 文件夹。

现在，你的工程项目文件夹的结构可能是这样的：

组件与页面一样，都需要三个文件，即 hml、js、css。

组件之HML

    {{msg}}

组件之JS

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

引入组件

现在你需要将封装好的新组件引入到寄主页面中，需要用到非常重要的标签 —— element，element 包含两个属性，name 和 src。

1. name 属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。若没有设置 name 属性，则默认使用 hml 文件名作为组件名。
2. src 属性指自定义组件 hml 文件路径(必填)。

    
    
    
        This is a page.
    

！注意：组件名最好使用大驼峰命名法，主要是用于区别开基础组件名，也是为了提高可阅读性。

定义头像组件

组件之HML

头像的组件需要有一个 image 标签：

Props

定义组件的时候我们发现并不够灵活，我希望引入头像组件之后，可以为子组件传递图片地址。而自定义组件可以通过 Props 声明属性，它是你可以在自定义组件上注册的一些自定义属性，它是寄主页面向自定义组件通信的接口。

Props 支持类型包括：String，Number，Boolean，Array，Object，Function。在自定义组件中，Prop 名采用 camelCase (驼峰命名法) 形式定义属性；在寄主页面使用自定义组件，并传递参数时需要使用 kebab-case (短横线分隔命名) 形式。即当属性compProp在父组件引用时需要转换为comp-prop。

在组件的 js 文件里，我们需要定义两个 Prop，一个用于代替 image 标签的 src ，一个是用来定义图片大小的 size：

export default {
    props: {
        // 一个 Prop，用于设置头像地址
        imgSrc: {
            // imgSrc 属性的默认值，在不传递该属性时会使用默认值作为替代。
            default: 'https://pic.cnblogs.com/avatar/2271881/20210617130249.png'
        },
        // 一个 Prop，用于设置头像大小
        size: {
            default: 50
        }
    }
}

组件的样式我们就使用内联 style ，图片的 src 我们使用 Props 里的 imgSrc 来代替：

Props 的单向性，更多细节阅读??

引入组件

到这里，我们就封装了一个组件了，接着就是引入它：

    
    
        This is a page.
    

成果演示

页面成功显示了刚刚自定义的头像组件。现在，我们修改组件的 imgSrc 和 size 属性：