关于ArkTS语言@State、@Prop、@Link、@Builder

myzbx 2025-03-12 18:29 29 浏览

组件状态管理装饰器用来管理组件中的状态

@State：装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。

注意：@State装饰的属性必须初始化值的设置

@State completed: boolean = false;

@Prop：与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。

注意：@Prop装饰的属性能做初始化值的设置

例子说明：

@Prop isCompleted: boolean;
@Prop：不能初始化，只能被其父组件的@State初始化。
// 外部使用:（父组件使用：ToDoItem({content: "啦啦", isCompleted: false})）。
内部组件改变其属性，则会刷新build()，不会刷新父组件。

在小组件中定义私有属性可使用：private content?: string; ? :默认值为null

@Link：装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部进行初始化。

注意：@Link装饰的属性不能做初始化值的设置

@Link value: string;

组件装饰器

@Builder：装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。

例子:

// 局部抽离的组件
// @Builder装饰器，来修饰一个函数，快速生成布局内容，从而可以避免重复的UI描述内容
@Builder checkImage(icon: Resource) {
		Image(icon)
				.objectFit(ImageFit.Contain)
				.width($r("app.float.checkbox_wh"))
				.height($r("app.float.checkbox_wh"))
				.margin($r("app.float.checkbox_margin"))
}

使用：
	// 没效果的写法：this.checkImage(this.isCompleted ? $r("app.media.check") : $r("app.media.no_check"));
	if (this.isCompleted) {
			this.checkImage($r("app.media.check"));
	} else {
			this.checkImage($r("app.media.no_check"));
	}

CSS object-fit

上一篇：怎么下载网页中的视频?视频下载方法(二)知乎上
下一篇：网站性能不佳?试试这十大前端性能优化技巧!

关于ArkTS语言@State、@Prop、@Link、@Builder

组件状态管理装饰器用来管理组件中的状态

组件装饰器

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」