1# 自定义组件 2 3### 简介 4 5自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，提高代码的可读性。本示例展示了JS中自定义组件的使用，包括基本用法、自定义事件、Props和事件参数。实现效果如下： 6 7 8 9### 相关概念 10 11自定义组件：自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。 12 13Props：自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。 14 15slot插槽：自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素。 16 17### 相关权限 18 19不涉及。 20 21### 使用说明 22 231.在主界面为用户展示了一个简单的小说推荐页，其中列表中的条目使用的是自定义组件，自定义组件通过element引入到宿主页面。用户点击**收藏**或**已收藏**时子组件点击事件会传参给父组件，父组件获取到参数后更新书籍是否已收藏，同时通过属性的方式将参数传给子组件，更新子组件中的显示文本为**已收藏**或**收藏**。 24 252.点击**进入收藏**，会将收藏状态的书籍加入收藏列表，并将收藏列表作为参数传递到收藏页面，进入收藏列表页会展示添加到收藏列表中的书籍，列表中的条目仍然使用的是自定义组件。 26 27### 约束与限制 28 291.本示例支持标准系统上运行。 30 312.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。 32
