组件之间传值@Prop和@Link装饰器的使用和区别

1. 装饰器@Prop

• @Prop装饰器用来在子组件接收父组件传入的值信息。

• @Prop装饰器建立的是单向数据绑定，在子组件中可以修改 @Prop装饰的变量信息，但是父组件对应的 @State 不会收到信息，父组件@State装饰的变量也不会发生变化。

• 父组件@State装饰的变量在父组件中发生变化，自组件@Prop装饰的变量会跟随变化。

  # 父组件
  
  @State passMsg:string = '传递给子组件的信息'
  
  # 调用子组件sonComponent
  sonComponent({msg: this.passMsg}) # 把passMsg传递给子组件
  

  # 子组件
  
  @Prop msg:string # 使用@Prop装饰器接收父组件传入的信息
  
  Text(this.msg) # 渲染父组件传入的信息
  

2. 装饰器@Link

• @Link 与 @Prop 装饰器使用方式相同，渲染效果也相同

• 不同点在于 @Link 实现的是双向数据绑定，父组件数据变化，子组件会更新。 子组件更新数据，父组件也能跟着数据变化。

• 使用 @Link 装饰的变量 在传递时， 需要使用 *passMsg})

  # 父组件
  
  @State passMsg:string = '传递给子组件的信息'
  
  Text(this.passMsg) # 同时会跟着子组件数据的变化而变化
  # 调用子组件linkSonComponent
  linkSonComponent({msg: $passMsg}) # 把passMsg传递给子组件, 传递信息的方式要使用 $ 修饰符
  

  # 子组件
  
  @Link msg:string # 使用@Link装饰器接收父组件传入的信息
  
  Button(this.msg) # 渲染父组件传入的信息
    .onClick(() => {
        this.msg = 'hello world' # 子组件数据变化，父组件数据也会变化
    })