HarmonyOS鸿蒙Next中父组件如何给子组件传递UI？

HarmonyOS鸿蒙Next中父组件如何给子组件传递UI？

3 回复

通过props可以传递数据给子组件：

// 子组件
@Component
struct ChildComponent {
  // 定义接收的属性
  props: { message: string }

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

// 父组件
@Component
struct ParentComponent {
  build() {
    Column() {
      // 引用子组件，并传递一个简单的字符串数据
      ChildComponent({ message: 'Hello, World!' })
      
      // 传递复杂的UI结构
      ChildComponent({
        message: () => Text('Dynamic UI')
          .fontSize(20)
          .color(Color.Blue)
      })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中父组件如何给子组件传递UI？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，父组件向子组件传递UI主要通过自定义组件和@BuilderParam装饰器实现。具体步骤：

  1. 父组件使用@Builder装饰器定义UI构建函数
  2. 子组件通过@BuilderParam装饰器声明UI接收属性
  3. 父组件调用子组件时，将@Builder函数作为参数传递给@BuilderParam属性

示例代码片段：

// 父组件
[@Builder](/user/Builder) function ParentUI() {
  Text('来自父组件的UI')
}

// 子组件
struct Child {
  [@BuilderParam](/user/BuilderParam) childUI: () => void
}

// 使用
Child({ childUI: ParentUI })

这种方式实现了UI结构的跨组件传递，符合鸿蒙ArkUI的声明式开发范式。

在HarmonyOS Next中，父组件向子组件传递UI主要通过以下方式实现：

  1. 使用@Builder装饰器： 父组件可以定义@Builder方法构建UI结构，然后通过子组件的属性传递给子组件。

示例代码：

// 父组件
[@Builder](/user/Builder)
function parentBuilder() {
  Column() {
    Text('来自父组件的UI内容')
      .fontSize(20)
  }
}

@Entry
@Component
struct ParentComponent {
  build() {
    Column() {
      ChildComponent({ builder: this.parentBuilder })
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  [@BuilderParam](/user/BuilderParam) builder: () => void

  build() {
    Column() {
      this.builder()
    }
  }
}

  1. 使用@BuilderParam装饰器： 子组件使用@BuilderParam属性接收父组件传递的UI内容。

  2. 插槽方式： 类似Web开发中的插槽概念，父组件可以在子组件标签内部直接放置UI内容。

示例代码：

// 父组件
@Entry
@Component
struct ParentComponent {
  build() {
    Column() {
      ChildComponent() {
        Text('插槽内容')
          .fontColor(Color.Red)
      }
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  [@BuilderParam](/user/BuilderParam) content: () => void = () => {}

  build() {
    Column() {
      this.content()
    }
  }
}

这些方式都能实现父组件向子组件传递UI内容，开发者可以根据具体场景选择合适的方式。

回到顶部