如何监听自定义子组件中TextInput输入内容的变化
===========================

#### 问题现象

在父组件中，如何获取并响应自定义子组件内TextInput输入框内容的变化？

#### 背景知识

*   [onChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#onchange)：当[TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)输入内容发生变化时，触发该回调。
*   [@Watch](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-watch)：@Watch用于监听状态变量的变化，当状态变量变化时，@Watch的回调方法将被调用。
*   [@Link](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-link#简单类型和类对象类型的link)：实现父子双向同步，子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

#### 解决方案

*   方案一：父组件向子组件传递回调函数，在子组件TextInput的onChange回调中调用该函数，实现对输入内容变化的监听。
    
    @Component
    struct ChildComponent {
      onChange?: (value: string) \=\> void \= () \=\> {
      };
    
      build() {
        Column() {
          TextInput()
            .width('80%')
            .onChange((value: string) \=\> {
              // 更新子组件本地状态
              this.onChange?.(value);
            });
        }
        .justifyContent(FlexAlign.Center)
        .padding(20);
      }
    }
    
    @Entry
    @Component
    struct ParentComponent {
      // 父组件的状态：用于接收子组件传递的值
      @State parentValue: string \= '';
    
      build() {
        Column() {
          ChildComponent({
            onChange: (value: string) \=\> {
              // 接收子组件传递的值，并更新父组件状态
              this.parentValue \= value;
            }
          });
          Text(\`父组件接收到的值：${this.parentValue}\`)
            .fontSize(16)
            .margin({ top: 10 });
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .padding(40);
      }
    }
    
*   方案二：通过[@State](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state)与@Link实现父子组件变量双向绑定，并在父组件中通过@Watch监听变量的变化，实现监听的目的。
    
    @Component
    struct ChildComponent1 {
      // 使用@Link修饰符绑定父组件的值，实现双向数据同步
      @Link value: string;
    
      build() {
        Column() {
          TextInput()
            .width('80%')
            .onChange((newValue: string) \=\> {
              this.value \= newValue;
            });
        }
        .justifyContent(FlexAlign.Center)
        .padding(20);
      }
    }
    
    @Entry
    @Component
    struct ParentComponent1 {
      @State @Watch('dataChange') parentValue: string \= '';
    
      dataChange() {
        console.info('Value changed in child:', this.parentValue);
      }
    
      build() {
        Column() {
          // 通过$符号绑定父组件的state，实现双向绑定
          ChildComponent1({
            value: $parentValue
          });
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .padding(40);
      }
    }