文章目录
💎 为什么要使用子组件？
场景一： 存在一个 2000 行左右的xxx.ets文件，并有 10 处重复使用 50 行相同逻辑的代码，此时需要给这一块逻辑增加 / 修改日志输出的格式。
场景二： 项目开发时，已在其中一个页面实现定制化的弹窗提示，但是在之后的新需求中，需要在新页面中再次使用相同的弹窗提示。
两个开发场景中，都需要重复使用相同代码逻辑，因此就需要将公共的、可重用的代码块进行封装，作为一个子组件来使用。
💎 如何自定义子组件？
子组件必须的组成要素：
（1）@Component 装饰器
（2）struct 关键字
（3）build() 函数
@Component
struct ChildComponent {
...
build() {
...
}
}
补充说明： 若子组件单独定义在一个文件中时，需要使用export导出子组件。
💎 如何使用子组件？
子组件定义的位置不同，引入的方式存在区别。
例：子组件为 ChildComponent
💰 1、子组件与父组件定义在同一个文件
@Entry
@Component
struct ParentComponent {
build() {
// 直接使用子组件
ChildComponent()
}
}
💰 2、子组件与父组件定义在不同文件
//引入子组件
import {
ChildComponent} from './ChildComponent'
@Entry
@Component
struct ParentComponent {
build() {
// 先引入再使用子组件
ChildComponent()
}
}
💎 父组件给子组件传参
这里仅介绍@Prop、@Provide / @Consume两种简单方式。@Link、@Observed / @ObjectLink同样可以进行传参，之后需要单独说明这几种方式的区别。
💰 @Prop
在子组件中声明变量，该变量允许不用初始化。当@Prop装饰的变量没有初始化时，父组件需要提供数据源进行初始化；若@Prop装饰的变量初始化时，父组件非必需提供数据源。
@Component
struct ChildComponent {
@Prop name: string
build() {
}
}
@Entry
@Component
struct ParentComponent {
@State ParentName: string = "LiHua"
build() {
ChildComponent({
name: this.ParentName })
}
}
💰 @Provide / @Consume
与@Prop不同的是，@Provide / @Consume支持更多层级组件之间传递参数，支持子孙组件直接接受到祖先组件的参数，解决父组件参数需要在子组件之间依次传递参数的问题；
@Component
struct ChildSonComponent {
@Consume name: string
build() {
}
}
@Component
struct ChildComponent {
build() {
ChildSonComponent()
}
}
@Entry
@Component
struct ParentComponent {
@Provide ParentName: string = "LiHua"
build() {
ChildComponent()
}
}
