自定义组件

简介

自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，提高代码的可读性。本示例展示了JS中自定义组件的使用，包括基本用法、自定义事件、Props和事件参数。实现效果如下：

相关概念

自定义组件：自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。

Props：自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。

slot插槽：自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素。

相关权限

不涉及。

使用说明

1.在主界面为用户展示了一个简单的小说推荐页，其中列表中的条目使用的是自定义组件，自定义组件通过element引入到宿主页面。用户点击收藏或已收藏时子组件点击事件会传参给父组件，父组件获取到参数后更新书籍是否已收藏，同时通过属性的方式将参数传给子组件，更新子组件中的显示文本为已收藏或收藏。

2.点击进入收藏，会将收藏状态的书籍加入收藏列表，并将收藏列表作为参数传递到收藏页面，进入收藏列表页会展示添加到收藏列表中的书籍，列表中的条目仍然使用的是自定义组件。

约束与限制

1.本示例支持标准系统上运行。

2.本示例需要使用DevEco Studio 3.0 Beta3 (Build Version: 3.0.0.901, built on May 30, 2022)才可编译运行。