HarmonyOS 鸿蒙Next 父组件如何与多个子组件共用状态变量

我想实现父子组件共用状态变量，点击”添加“就闪退Error message:is not callable。

子组件那里改为@State data:Item={}不闪退，但是这样父组件就感知不到子组件了，应该怎么办呢?

更多关于HarmonyOS 鸿蒙Next 父组件如何与多个子组件共用状态变量的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 1楼•4 天前作者

@Provide和@Consume 简单粗暴（doge）

更多关于HarmonyOS 鸿蒙Next 父组件如何与多个子组件共用状态变量的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼•4 天前

concat方法类型声明

concat(...items: ConcatArray<T>[]): T[];
concat(...items: (T | ConcatArray<T>)[]): T[];

你用法用错了

caililin 3楼•4 天前

没错吧。

let arr1 = [1, 2, 3];  
let result = arr1.concat(4);     // result: [1, 2, 3, 4]

这样创建新数组，

songsunli 4楼•4 天前

interface Item { label: string }

@Observed class IIIII { label: string

constructor(label: string) {
    this.label = label
}

}

@Entry @Component struct TestPage { @State items: IIIII[] = [ ];

add() {
    this.items = this.items.concat(new IIIII(Date.now()
        .toString()))
}

build() {
    Column() {
        Text(JSON.stringify(this.items, null, 2))
        Column() {
            ForEach(this.items, (it: IIIII, index: number) => {
                RenderItem({
                    data: this.items[index]
                })
            })
            Button("添加")
                .onClick(() => {
                    this.add()
                })
        }
        .width('100%')
    }
    .height('100%')
}

}

@Component struct RenderItem { @ObjectLink data: IIIII // 这里不能用 Link 得用 @ObjectLink

// @Link 创建状态变量的监听深度取决与 Object.keys 的值，就是你监听的深度深了就不行
// 只能用 ObjectLink 用 ObjectLink 创建状态变量就得配合 Observed
build() {
    Text(this.data.label)
        .onClick(() => {
            this.data.label += "-"
        })
}

}

wuwangju 5楼•4 天前

感谢！用了ObjectLink后确实可以达到要求了。不过我还是没懂，如果ObjectLink和Link的区别是监听深度，为什么我用你的代码改用Link会闪退。是不是父组件@State修饰的是数组，而子组件修饰的是元素，此时就不能用@Link修饰子组件？

yuanlaile 6楼•4 天前

在HarmonyOS中，父组件与多个子组件共用状态变量可以通过@State和@Link装饰器实现。@State用于父组件中声明状态变量，@Link用于子组件中引用父组件的状态变量。父组件通过传递@Link绑定的状态变量给子组件，子组件可以直接修改父组件的状态，实现状态共享。

例如，父组件中声明一个状态变量：

@State message: string = 'Hello, HarmonyOS';

子组件中通过@Link引用父组件的状态变量：

@Link message: string;

父组件将状态变量传递给子组件：

ChildComponent({ message: this.message })

子组件可以直接修改this.message，父组件和所有使用该状态的子组件都会同步更新。

phonegap100 7楼•4 天前

在HarmonyOS鸿蒙Next中，父组件与多个子组件共用状态变量可以通过以下步骤实现：

定义状态变量：在父组件中定义状态变量，使用@State装饰器。
传递状态变量：通过@Prop或@Link装饰器将状态变量传递给子组件。
更新状态变量：在父组件中更新状态变量，子组件会自动同步更新。

例如：

@Entry
@Component
struct ParentComponent {
  @State sharedState: string = 'Hello';

  build() {
    Column() {
      ChildComponent({ sharedState: this.sharedState })
      ChildComponent({ sharedState: this.sharedState })
      Button('Update').onClick(() => {
        this.sharedState = 'Updated';
      })
    }
  }
}

@Component
struct ChildComponent {
  @Prop sharedState: string;

  build() {
    Text(this.sharedState)
  }
}

通过这种方式，父组件与多个子组件可以共享和同步状态变量。