【HarmonyOs鸿蒙】七种传参方式

一、页面间导航传参

使用场景:页面跳转时传递参数

实现方式:通过router模块的push方法传递参数

// 页面A传参
import router from '@ohos.router';

router.pushUrl({
  url: 'pages/PageB',
  params: { 
    id: 123, 
    name: 'HarmonyOS' 
  }
});

// 页面B接收参数
@Entry
@Component
struct PageB {
  @State params: object = router.getParams(); // 获取参数

  build() {
    Column() {
      Text(`ID: ${this.params['id']}`)
      Text(`Name: ${this.params['name']}`)
    }
  }
}

二、组件间直接传参(父子组件)

父子组件间数据传递

通过@PROP @LINK装饰器

父子组件传参

1、父组件传递参数

// 父组件
@Entry
@Component
struct ParentComponent {
  @State parentData: string = 'From Parent';

  build() {
    Column() {
      ChildComponent({ 
        childProp: this.parentData, // 传递普通数据
        childLink: $parentData      // 传递双向绑定数据
      })
    }
  }
}

2、子组件接收参数

// 子组件
@Component
struct ChildComponent {
  @Prop childProp: string;           // 单向同步
  @Link childLink: string;           // 双向绑定

  build() {
    Column() {
      Text(this.childProp)
      Button('修改父数据')
        .onClick(() => {
          this.childLink = 'Changed by Child';
        })
    }
  }
}

三、全局状态管理传参

使用场景:跨组件/跨页面共享数据
实现方式:使用AppStorage全局状态管理

// 存储数据
AppStorage.SetOrCreate('globalData', 'Initial Value');

// 任意组件获取数据
@Component
struct AnyComponent {
  @StorageLink('globalData') globalData: string = '';

  build() {
    Button(`当前值: ${this.globalData}`)
      .onClick(() => {
        this.globalData = 'New Value';
      })
  }
}

四、本地持久化传参

使用场景:需要持久化存储的数据
实现方式:使用Preferences本地存储

// 存储数据
import { Preferences } from '@ohos.data.preferences';

let prefs: Preferences = await Preferences.getPreferences(context, 'myPrefs');
await prefs.put('key', 'value');
await prefs.flush();

// 读取数据
let value = await prefs.get('key', 'default');

五、事件总线传参

使用场景:任意组件间通信

实现方式:使用Emitter事件总线


// 发送事件
import emitter from '@ohos.events.emitter';

const eventData = {
  data: { message: 'Hello HarmonyOS' }
};
emitter.emit(eventData, {
  eventId: 1, // 自定义事件ID
  priority: emitter.EventPriority.HIGH
});

// 接收事件
emitter.once({
  eventId: 1
}, (eventData) => {
  console.log('收到消息:', eventData.data.message);
});

六、UIAbility间传参

使用场景:跨应用/跨Ability通信
实现方式:使用Want对象传递参数

// 发送方
let want = {
  bundleName: 'com.example.app',
  abilityName: 'EntryAbility',
  parameters: {
    key1: 'value1',
    key2: 100
  }
};
context.startAbility(want);

// 接收方
import UIAbility from '@ohos.app.ability.UIAbility';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    let params = want.parameters; // 获取参数
  }
}

七、组件深层次传参

使用场景:多层嵌套组件传递复杂对象
实现方式:使用@ObjectLink装饰器

// 定义数据类
class User {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// 父组件
@Entry
@Component
struct Parent {
  @State user: User = new User('Alice', 25);

  build() {
    Column() {
      Child({ user: this.user })
    }
  }
}

// 子组件
@Component
struct Child {
  @ObjectLink user: User;

  build() {
    Column() {
      Text(this.user.name)
      Button('修改年龄')
        .onClick(() => {
          this.user.age += 1;
        })
    }
  }
}

传参方式对比表

方式

适用场景

数据流向

生命周期

性能影响

页面导航传参

页面跳转

单向

页面存活期间

@Prop/@Link

父子组件

单向/双向

组件存活期间

AppStorage

全局状态

双向

应用运行期间

Preferences

持久化存储

单向

永久存储

事件总线

任意组件通信

单向

事件触发时

UIAbility传参

跨应用通信

单向

Ability运行期间

@ObjectLink

复杂对象多层传递

双向

组件存活期间

最佳实践建议

  1. 简单页面跳转优先使用router传参
  2. 父子组件通信根据需求选择:

单向数据流:使用@Prop

需要双向绑定:使用@Link

     3.全局状态管理

单个页面内共享使用LocalStorage

跨页面共享使用AppStorage

      4.复杂对象传递优先使用@ObjectLink

      5.敏感数据传递建议结合加密模块使用

你可能感兴趣的:(HarmonyOS鸿蒙,harmonyos,华为)