当前位置：首页 > news >正文

鸿蒙组件数据传递：ui传递、@prop、@link

news 2025/9/13 9:16:27

鸿蒙组件数据传递方式有很多种，下面详细罗列一下：

注意：
文章内名词解释：
正向：父变子也变逆向：子变父也变

**第一种：直接传递

- 特点：1、任何数据类型都可以传递 2、不能响应式更新（正向逆向都不行） 3、适合纯ui渲染 4、子组件需要初始化数据**

@Entry
@Component
struct Demo04 {@State message: string = 'Hello World123'@State obj: Aa = {name: 'zhangsan'}build() {Row() {Column() {Text("基本数据类型")Son({ message: this.message })Divider().strokeWidth(2)Text("对象数据类型")Son({ obj:this.obj })Button('改变数据').onClick((event: ClickEvent) => {this.message = '666'})}.width('100%')}.height('100%')}
}@Component
struct Son {message: string = ''obj:Aa = {name:''}build() {Row() {Text(this.message)Text(this.obj.name)}}
}class Aa{name: string = ''
}

第二种：@prop传递

特点：1、只能传递基本数据类型 2、可以正向的响应式数据更新 3、适合父组件改变子组件数据，但是子组件无法改变父组件数据的需求 4、子组件不需要初始化数据

@Entry
@Component
struct Demo04 {@State message: string = 'Hello World123'@State obj: Aa = {name: 'zhangsan'}build() {Row() {Column() {Text(this.message)Button('改变数据').onClick((event: ClickEvent) => {this.message = '666'}).margin({bottom:20})Divider().strokeWidth(5)Text("基本数据类型")Son({ message: this.message })Divider().strokeWidth(2)Text("对象数据类型")// Son({ obj:this.obj })}.width('100%')}.height('100%')}
}@Component
struct Son {@Prop message:string// @Prop obj:Aabuild() {Row() {Text(this.message)// Text(this.obj.name)Button("逆向改变").onClick(() => {this.message = "子变父不变"// this.obj.name = "子变父不变"})}}
}class Aa{name: string = ''
}

第二种：@link传递

特点：1、任何数据类型都可以 2、可以正向和逆向的响应式数据更新 3、适合子父组件一起更新数据的需求 4、子组件不需要初始化数据

@Entry
@Component
struct Demo04 {@State message: string = 'Hello World123'@State obj: Aa = {name: 'zhangsan'}build() {Row() {Column() {Text(this.message)Text(this.obj.name)Button('改变数据').onClick((event: ClickEvent) => {this.message = '666'this.obj.name = "lisi123"}).margin({bottom:20})Divider().strokeWidth(5)Text("基本数据类型")Son({message:$message})Divider().strokeWidth(2)Text("对象数据类型")// Son({obj:$obj})}.width('100%')}.height('100%')}
}@Component
struct Son {@Link message:string// @Link obj:Aabuild() {Row() {Text(this.message)// Text(this.obj.name)Button("逆向改变").onClick(() => {this.message = "子变父不变"// this.obj.name = "子变父不变"})}}
}class Aa{name: string = ''
}