README_en.md
1# Componentization
2
3### Introduction
4
5This sample demonstrates how custom components work, including one-way and two-way data binding and page rendering. The @Component, @builder, @Extend, and @BuilderParam decorators make the code more modular and reusable, improving the code reading efficiency. The home page consists of the carousel component on the top, statistics component in the middle, and **\<TabContent>** component at the bottom. When data on a page changes, the related variables of other components change accordingly, and the page is refreshed in a timely manner.
6
7### Usage
8
91. When you touch the Live review button in the carousel component on the top or the Release video cover on the left of **\<ListItem>** on the **TabContent** page at the bottom, the number of views in the statistics component increases by 1.
102. When you touch the Live reminder button in the carousel component on the top or the Reminder in the **\<ListItem>** on the **TabContent** page at the bottom, the buttons as well as the icons of the related items in the carousel component and the **TabContent** page change, number of views in the statistics component increases by 1.
113. Touch the Favorites button of **\<ListItem>** on the **TabContent** page at the bottom. The number of favorite videos in the middle statistics component increases by 1, and the icons of related items on other content pages in the **\<TabContent>** component at the bottom are also updated.
12
13### Constraints
14
15This sample can only be run on standard-system devices.
16
README_zh.md
1# 组件化
2
3### 简介
4
5本示例主要演示了自定义组件，包含数据的单双向传递及页面渲染，通过对@Component、@builder、@Extend、@BuilderParam使代码更加模块化，复用性更高，提升了代码的阅读效率。主界面由顶部轮播图组件、中部统计量组件、底部TabContent组件构成，当各个页面的数据发生变化时，其他组件的相关变量也随之发生变化，并及时刷新页面。实际效果如下：
6
7
8
9#相关概念
10
11组件化：build函数、自定义组件初始化、自定义组件生命周期回调函数、自定义组件生命周期回调函数。
12
13### 相关权限
14
15不涉及。
16
17### 使用说明
18
191.点击顶部轮播图中的**直播回顾**按钮或底部TabContent页面中ListItem中最左侧的**发布会视频封面**，则中部统计量组件中浏览量+1。
20
212.点击顶部轮播图中的**直播预约**按钮或底部TabContent页面中ListItem的**预约**按钮，按钮图标会发生变化，顶部轮播图和底部TabContent相同数据的组件图标会发生联动效应，并且中部统计量组件中预约量+1。
22
233.点击底部TabContent页面中ListItem的**收藏**按钮，则中部统计量组件中视频收藏量+1，并且底部TabContent组件中其它Content页面的数据也会同步刷新图标状态。
24
25### 约束与限制
26
271.本示例仅支持在标准系统上运行。
28
292.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。
