1.6　实战：自定义导航

前面几节讲解了ArkTS相关的一些装饰器，但是还有一个比较重要的装饰器——@Component没有用到，本节将以实战的形式一并展示这些装饰器的用法。

本实战的目标是创建一个子组件，在父组件中传递参数，并在子组件中展示。

在讲解本实战之前，先来学习一下自定义组件的基本用法。示例代码如下：

@Component
struct HelloComponent {
  @State message: string = 'Hello, World!';
  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

这段代码定义了一个名为HelloComponent的自定义组件。在这个例子中，我们使用了@Component注解来标记这是一个自定义组件，然后定义了一个状态变量message，其初始值为'Hello, World!'。build方法是组件的核心，它返回一个UI元素。在这个例子中，返回了一个Row组件，它包含一个Text组件。Text组件显示了message变量的值。当message变量的值发生变化时，UI会自动刷新以显示新的值。在这个例子中，我们将message的值更改为'Hello, ArkUI!'，这将导致UI从显示'Hello, World!'变为显示'Hello,ArkUI!'。

需要注意的是，如果要在其他文件中引用这个自定义组件，需要使用export关键字导出它，并在使用的页面中使用import关键字导入该自定义组件。这样，其他文件就可以使用这个组件了。

下面来介绍本实战的操作步骤。

01 创建基础页面布局，代码如下：

02 创建导航子组件，操作过程如图1-56所示：在目录中选中Pages并右击，在弹出的快捷菜单中选择“新建”，然后选择ArkTS File，接着输入子组件的名称。

子组件内容如图1-57所示。

图1-56　创建导航子组件

图1-57　子组件内容

03 父组件相关修改如下：

（1）通过import导入子组件。

（2）可以通过as关键字进行重命名：

import  {Navbar} from './Navbar'

（3）定义传递参数的变量：

@State title:string ='标题内容'

（4）在页面中使用子组件并传参：

Navbar({title:this.title})

完整代码如下：

效果如图1-58所示。

图1-58　自定义导航页面效果 NKEpRJTdpn3G79ns+fUCZDGqYbtpeuFPT6z5DgSUXprolHMX8fJos5UF496NNoZX