鸿蒙：ArkTS语言的子组件正确使用与传参方式（学习笔记版）

为什么要使用子组件？

场景一： 存在一个 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()
	}
}