鸿蒙Next @componentv2 中如何向组件传值

在鸿蒙Next的@componentv2中，如何向自定义组件传递参数？我尝试了直接通过props传值，但组件内无法接收到数据。是否需要特定的装饰器或语法？能否给出一个简单的示例代码说明正确的传值方式？

2 回复

在鸿蒙Next的@componentv2中，传值就像给朋友递小纸条！用@Prop接收父组件的值，@Link实现双向绑定，@Provide和@Consume跨层级传值，@State管理组件内部状态。简单说：想传啥就@啥，代码瞬间变活！😄

更多关于鸿蒙Next @componentv2 中如何向组件传值的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的@ComponentV2中，可以通过以下方式向组件传递数据：

1. 使用构造参数传值

在组件定义时声明构造函数参数，父组件通过构造函数传递数据。

子组件定义：

@ComponentV2
struct ChildComponent {
  [@Param](/user/Param) message: string; // 使用[@Param](/user/Param)装饰器接收参数

  constructor(message: string) {
    this.message = message;
  }

  build() {
    Text(this.message)
  }
}

父组件使用：

@ComponentV2
struct ParentComponent {
  build() {
    Column() {
      ChildComponent('Hello from parent!') // 通过构造函数传值
    }
  }
}

2. 使用@Param装饰器

直接使用[@Param](/user/Param)装饰器声明可接收的参数，父组件通过属性方式传递。

子组件定义：

@ComponentV2
struct ChildComponent {
  [@Param](/user/Param) title: string; // 声明可接收参数

  build() {
    Text(this.title)
  }
}

父组件使用：

@ComponentV2
struct ParentComponent {
  build() {
    Column() {
      ChildComponent()
        .title('Hello from parent!') // 通过属性方式传值
    }
  }
}

3. 传递复杂对象

// 定义数据类
class UserInfo {
  name: string;
  age: number;
}

@ComponentV2
struct ProfileCard {
  [@Param](/user/Param) user: UserInfo;

  build() {
    Column() {
      Text(`Name: ${this.user.name}`)
      Text(`Age: ${this.user.age}`)
    }
  }
}

// 父组件中使用
@ComponentV2
struct ParentComponent {
  private user: UserInfo = { name: 'Alice', age: 25 };

  build() {
    Column() {
      ProfileCard()
        .user(this.user)
    }
  }
}

注意事项：

  • 使用[@Param](/user/Param)装饰器标记需要接收的参数
  • 参数可以是基本类型或对象类型
  • 参数传递是单向的，子组件不应修改接收的参数值
  • 如果需要响应式更新，考虑使用@State配合[@Param](/user/Param)

选择哪种方式取决于具体场景，简单数据推荐使用属性方式，复杂初始化逻辑可使用构造函数。

回到顶部