README.md
1# JSUICustomComponent
2
3
4
5### Introduction
6
7A custom component is one that combines existing components based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. This sample illustrates how to use custom components in JavaScript, including basic usage, custom events, props, and event parameters.
8
9### Usage
10
111. The home screen of the sample application is a simple list of recommended e-books. The items in the list are custom components, which are introduced to the host page through **element**. When a user clicks **Collect** or **Collected** on a child component, the click event passes parameters to the parent component. After obtaining the parameters, the parent component updates the e-book status (collected or not) and passes the parameters to the child component through attributes. The text displayed in the child component then changes to **Collected** or **Collect**, depending on the e-book status.
12
132. When a user clicks **Enter collected**, the system adds the e-book in **Collected** state to the **Collected** list and passes the list as a parameter to the **Collected** page. When the user accesses the **Collected** page, the e-books added to the **Collected** list are displayed. The items in the list are still custom components.
14
15### Constraints
16
17This sample can only be run on standard-system devices.
18
README_zh.md
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
