#鸿蒙通关秘籍#HarmonyOS NEXT开发中如何在父组件中调用两个不同的子组件？

首先，在HarmonyOS NEXT开发中，可以通过在父组件中引入两个不同的子组件来实现调用。以下是实现步骤：

1. 子组件一：新建页面

   在src > main > ets > pages > components > Child > index.ets文件中创建并定义了第一个子组件Child。该组件接收到name属性并设置显示为“子组件一”：

   @Component
   export struct Child {
     @Prop name: string
     @State message: string = '子组件一';
     
     build() {
       Row() {
         Text(this.message)
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
           .fontColor(Color.Blue)
           .alignRules({
             center: { anchor: '__container__', align: VerticalAlign.Center },
             middle: { anchor: '__container__', align: HorizontalAlign.Center }
           })
       }
     }
   }
   

   注意，在子组件中，通过@Prop接收父组件传递的参数，并使用export导出组件以便在其他地方引入。

2. 子组件二：与父组件在同一页面

   在与父组件相同页面src > main > ets > pages > Parent > index.ets中定义第二个子组件：

   @Component
   struct ChildTwo {
     @Prop name: string
     @State message: string = '子组件二';
   
     build() {
       Row() {
         Text(this.message)
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
           .fontColor(Color.Red)
           .alignRules({
             center: { anchor: '__container__', align: VerticalAlign.Center },
             middle: { anchor: '__container__', align: HorizontalAlign.Center }
           })
       }
     }
   }
   

   同样地，依然通过@Prop接收参数。

3. 父组件实现调用

   在父组件中，使用import来引入第一个子组件，并在布局中直接使用两子组件：

   import router from '@system.router';
   import { Child } from "../components/Child/index.ets"
   
   @Entry
   @Component
   struct Parent {
     @State message: string = '父级页面';
   
     build() {
       RelativeContainer() {
         Flex() {
           Child().width("50%");
           ChildTwo({name: "nameUse"}).width("50%");
         }
   
         Text(this.message)
           .fontSize(50)
           .fontWeight(FontWeight.Bold)
           .fontColor(Color.Blue)
           .alignRules({
             center: { anchor: '__container__', align: VerticalAlign.Center },
             middle: { anchor: '__container__', align: HorizontalAlign.Center }
           })
       }
     }
   }
   

   通过引入并在父组件中布局，就实现了对子组件的调用和使用。