问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在ArkTS中，如何使用@Link装饰器实现父子组件之间的双向数据绑定？

头像
阿波的朋友
    3.6k1545
    HarmonyOSharmonyos-next
    阅读 695
    avatarAI BotBETA
    在ArkTS中，你可以使用`@Link`装饰器来实现父子组件之间的双向数据绑定。以下是具体步骤：

1. **在父组件中定义并导出数据**：
   使用`@State`装饰器定义状态，然后使用`@Link`装饰器将其导出，以便子组件可以链接到该状态。

2. **在子组件中导入父组件的状态**：
   使用`@Link`装饰器的`from`参数来导入父组件中导出的状态。

3. **在子组件中更新状态**：
   由于`@Link`实现了双向绑定，子组件可以直接修改导入的状态，这些修改将自动反映到父组件中。

示例代码如下：

**父组件 (ParentComponent.ark)**:

    import { defineComponent, State, Link } from '@arkui-js/arkui';

    @Component
    struct ParentComponent {
    @State parentData: string = "Hello from Parent";

    @Link('parentData') linkedData: string;

    build() {

    Column() {
  Text(this.parentData).fontSize(24).margin({ top: '10px' });
  ChildComponent({ linkedData: this.linkedData })
}.padding('16px')

    }
    }

    
**子组件 (ChildComponent.ark)**:

    import { defineComponent, Link } from '@arkui-js/arkui';

    @Component
    struct ChildComponent {
    @Link('linkedData') from: string;

    @Click
    handleClick() {

    this.from = "Hello from Child";

    }

    build() {

    Column() {
  Text(this.from).fontSize(24).margin({ top: '10px' });
  Button("Update from Child").onClick(this.handleClick)
}.padding('16px')

    }
    }

    
在上面的示例中，父组件`ParentComponent`定义了一个状态`parentData`，并使用`@Link`装饰器将其导出为`linkedData`。子组件`ChildComponent`使用`@Link`装饰器的`from`参数导入父组件的状态，并可以通过点击按钮来更新该状态。由于双向绑定的存在，父组件中的`parentData`状态将自动更新为子组件中的新值。
    1 个回答
    得票最新
    头像
    一键难忘
      11.4k110165

      在 ArkTS 中，可以使用@Link装饰器来实现父子组件之间的双向数据绑定。以下是一个示例：

      import { Button } from '@ohos:appcomponents';
import childComponent from './childComponent';

@Entry
@Component
struct ParentComponent {
  @State value: string = 'Initial Value';

  build() {
    Column() {
      Text(`Parent Value: ${this.value}`)
      childComponent({ value: this.value, onChange: newValue => this.value = newValue })
    }
  }
}

      子组件：

      @Component
struct childComponent {
  @Link value: string;
  onChange: (newValue: string) => void;

  build() {
    Column() {
      Text(`Child Value: ${this.value}`)
      Button('Change Value')
       .onClick(() => this.onChange('New Value from Child'))
    }
  }
}

      在这个示例中，父组件传递一个初始值和一个回调函数给子组件。子组件通过@Link装饰器接收这个值，并在按钮点击时调用回调函数来更新父组件的值，从而实现双向数据绑定。

      本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题