在本章中，你将学会如何使用@Prop装饰器的基础使用，及其实际开发中的使用场景。

Search搜索框视图

日常工作中我们可能都会遇到一个场景，即当前页面的参数值要传递到下一个页面中，比如首页->详情页。这时，就可以配合上一章节提及到的@State装饰器来实现这一逻辑。

比如我们我们设计2个页面，在当前页面输入内容，在第二个页面进行显示，我们先构建第一个页面的内容，如下代码所示：

php 复制代码

// 参数
@State searchText: string = ''
controller: SearchController = new SearchController()

// 视图
Column() {
  // 空白填充
  Blank()

  // 搜索框
  Search({ value: this.searchText, placeholder: '请输入内容', controller: this.controller })
    .searchButton('搜索')
    .height(60)
    .margin({ left: 20, right: 20, bottom: 60 })
    .onSubmit((value: string) => {
      this.searchText = value
    })
}
.height('100%')

上述代码中，我们使用@State装饰器表示了一个string类型的状态数据searchText，表明该数据接受更改并更新。为了使用Search组件，我们声明了一个搜索控制器SearchController，即在当前视图上创建一个新的控制器，用于启用输入搜索相关功能。

在视图搭建上，我们使用Column垂直布局容器，设置其高度为100%。在容器中我们使用Search搜索框视图作为主体功能视图，设置其高度为60，于是乎当Search搜索框视图高度固定的情况下，我们使用Blank空白填充视图，就可以将空白区域填充，使得Search搜索框视图位于页面底部位置。

而对于Search搜索框视图本身，我们设置其接收的内容value参数绑定我们声明好的参数searchText，提示文字placeholder为"请输入内容"，控制器类型为声明的SearchController，当然你也可以不单独声明，直接写new SearchController()。

外层修饰器方面，我们设置searchButton搜索按钮为"搜索"文字，设置当Search搜索框视图点击"搜索"时（即onSubmit），接受新的值并赋予给searchText。

简单来说，也就是在搜索框输入内容后，点击"搜索"按钮，输入的内容并更新到了searchText。

@Prop装饰器-单向数据传递

完成后下一步，我们创建一个新的视图，如下代码所示：

scss 复制代码

// 使用视图
DetailView({value:this.searchText})

// 声明第二个视图
@Component
struct DetailView {
  @Prop value: string

  build() {
    Column({space:20}) {
      Text(this.value)
        .fontSize(17)
        .fontColor('#181818')
      Text('你搜索的内容是：')
        .fontSize(14)
        .fontColor('#999999')
    }
  }
}

上述代码中，我们单独创建了一个新的自定义视图DetailView，并且使用@Prop装饰器表示了一个string类型的参数value。

在这里和@State装饰器不同的是，我们不需要给value参数复制，这是由于@Prop装饰器表示的参数是一种单向传递的参数，也就是该参数只从外部接收参数值。

完成DetailView视图后，我们在PropView页面中调用DetailView视图，作为其页面元素的一部份，并且对于DetailView视图使用@Prop装饰器表示的value参数，我们传入值为PropView页面页面中的参数searchText。

如此，当PropView页面中的searchText参数的值发生变化时，在点击按钮时，searchText参数的值会传递给DetailView视图中的value参数，实现参数的单向传递。如下图所示：

小知识·Struct和GlobalBuilder

在前面的章节中，我们学习过GlobalBuilder全局的自定义视图，而本章中我们使用了Component+Struct来创建自定义视图，那么两者有什么区别呢？

在实际使用上，GlobalBuilder是全局UI组件，常用于定义可复用的组件和UI元素，减少重复的代码量和提高代码的可维护性。但常常不包含状态管理和复杂的逻辑，作为轻量级的复用组件使用。

而使用Component+Struct来创建自定义视图更多的是创建"组件"，包含状态管理、生命周期方法和复杂逻辑，适用于构建完整的UI模块或页面，常常我们会将组件的参数使用@Prop装饰器表示，用于接收外部视图的数据。

因此，在实际开发过程中，使用Builder、GlobalBuilder，还是自定义Struct，可以根据当前业务场景的复杂度和代码块复用程度而定，在之后的章节中我们也会有所提及。

快来动手试试吧～

ArkUI极简教程11：@Prop单向数据传递的使用

Search搜索框视图

@Prop装饰器-单向数据传递

小知识·Struct和GlobalBuilder