【ArkTS】组件通信_ark ts父子怎么传递事件

父子通信

情况一：子组件只展示父组件中的状态

父组件通过 @State修饰符 定义变量，子组件通过 @Prop修饰符 获取变量。

Prop是 「单向传递」，父组件将变量「拷贝」一份交给子组件使用，子组件不可修改变量。

父组件

// 声明变量
@State count:number = 1
// 传值
Son({count:this.count})
1
2
3
4

子组件

// 接收
 @Prop count:number
1
2

情况二：子组件需要修改父组件中的状态

父组件通过 @State修饰符 定义变量，子组件通过 @Link修饰符 获取变量。

Link是 「双向传递」，父组件会将变量的「引用」交给子组件，相当于子组件可以直接修改父组件中的变量。

父组件

与Prop不同的是，当子组件使用@Link接收变量时（需要修改变量），父组件传值时需要使用 $。

// 声明变量
@State count:number = 1
// 传值
Son({count:$count})
1
2
3
4

子组件

// 接收
@Link count:number
1
2

@Prop和@Link总结

嵌套对象以及数组元素为对象时如何进行数据同步

@Prop和@Link均无法对 嵌套对象以及数组元素为对象 的场景进行双向数据同步，此时需要使用「@ObjectLink」和「@Observed」装饰器。

操作流程（这里用嵌套对象举例，数组元素为对象的使用情况一致）

1. @Observed修饰嵌套对象
2. 参数无法直接使用@ObjectLink修饰
3. 所以需要封装一个子组件，将该参数传给子组件
4. 子组件中以变量接收该参数，使用@ObjectLink修饰符修饰后，就可以操作 嵌套对象以及数组元素为对象 了

跨组件通信

父组件通过 @Provide修饰符 定义变量，子组件通过 @Consume修饰符 获取变量。

不同于@State，父组件「不需要传递参数」，子组件通过 @Consume修饰符 「直接使用变量」即可。

父组件

// 声明状态
@Provide count:number = 1
// 无需传值
Son()
1
2
3
4

后代组件

// 接收
@Consume count:number
1
2

应用数据共享

声明数据

在 EntryAbility.ts 中声明共享数据。文件路径如下：entry > src > main > ets > entryAbility > EntryAbility.ts

语法：

1. AppStorage.Set(‘变量名’,‘值’)
2. AppStorage.SetOrCreate(‘变量名’,‘值’)

二者相比， AppStorage.SetOrCreate()会判断变量是否存在，如果存在就重新赋值，否则创建。更加推荐使用 AppStorage.SetOrCreate()。

AppStorage.SetOrCreate('username','田本初')
1

使用

接收

let name:string = AppStorage.Get('appname')
1

使用

正常使用该变量发现并没有正常展示

拼接后发现name是undefined

这是因为 Previewer预览器 并不会再执行 EntryAbility.ts文件，所以该变量的值为undefined。
需要使用本地模拟器进行验证，启动本地模拟器后，变量正常显示。