免费网站域名cn,有谁做过网站建设,海外做淘宝网站,邵阳 网站开发 招聘本文 我们还是来说 两个 harmonyos 状态管理的装饰器
Observed与ObjectLink 他们是用于 嵌套对象 或者 以对象类型为数组元素 的数据结构 做双向同步的 之前 我们说过的 state和link 都无法捕捉到 这两种数据内部结构的变化
这里 我们模拟一个类数据结构
class Person{name:…本文 我们还是来说 两个 harmonyos 状态管理的装饰器
Observed与ObjectLink 他们是用于 嵌套对象 或者 以对象类型为数组元素 的数据结构 做双向同步的 之前 我们说过的 state和link 都无法捕捉到 这两种数据内部结构的变化
这里 我们模拟一个类数据结构
class Person{name: stringage: numbergf: Personconstructor(name: string, age: number,gf?: Person) {this.name name;this.age age;this.gf gf;}
}Person类 三个字段 name字符串 age数字 gf字段又套一个Person类对象 然后 我们构造器 通过构造方法接到外面传的参数 给我们类自己的属性赋值
然后 我们组件这样写
Entry
Component
struct Dom {State p: Person new Person(小猫猫,21,new Person(小小猫猫, 18))build() {Row() {Column() {Text(this.p.gf.name)Button(修改).onClick((){this.p.gf.name 小狗狗;})}.width(100%)}.height(100%)}
}这里 我们声明一个 叫 p的变量 类型为我们上面定义的 Person 类类型 然后new实例化一个Person 对象 第一个参数 字符串类型的 小猫猫 第二个参数 数字类型的 21 然后 第三个参数 在new一个Person对象 因为 gf 我们给的类型本来就是Person 第一个参数 字符串类型 值为 小小猫猫 第二个参数 数字类型 18 这里 我们不需要继续往下套了 就第三个参数不传就好了
然后 我们Text组件 展示了这个 p对象下的gf字段 下的 name字段 然后 我们Button按钮的点击事件更改这个name 为小狗狗
运行之后 我们 p.gf.name 的展示没问题 但是 当我们点击按钮时 大家会发现 Text中的内容并没有变成小狗狗 依旧是 小小猫猫 其实数据依旧变了 但是 我们用的是 State装饰 它监听不到这么深的对象结构
这里 我们可以用 Observed加ObjectLink解决 首先 你要将 需要用ObjectLink处理的类 上面加上 Observed 装饰器
Observed
class Person{name: stringage: numbergf: Personconstructor(name: string, age: number,gf?: Person) {this.name name;this.age age;this.gf gf;}
}然后 你要将 需要被监听的元素加上 ObjectLink修饰
我们将组件代码改成这样
Entry
Component
struct Dom {State p: Person new Person(小猫猫,21,new Person(小小猫猫, 18))build() {Row() {Column() {Domismin({p: this.p.gf})Button(修改).onClick((){this.p.gf.name 小狗狗;})}.width(100%)}.height(100%)}
}
Component
struct Domismin {ObjectLink p: Person;build() {Text(this.p.name)}
}这里 我们多定义了一个 Domismin 组件 里面就一个Text组件 用来展示 传进来的p属性的name 然后 我们外面组件 将 p的gf字段 传给Domismin 组件做p属性 其实主要就是为了让 gf加上ObjectLink 因为 在new时 是加不了注解的 所以 要多弄一个组件来绑
此时 我们点击内容就修改了
这样 我们对象嵌套类型的就说完了
然后 还有我们数组元素为对象的格式了 先定义一个这样的对象
class Person{name: stringage: numberconstructor(name: string, age: number) {this.name name;this.age age;}
}就是个普通对象 两个字段 name 字符串类型 age 数字类型 构造器接受两个参数 然后给自己的属性赋值
然后 组件中这样写
Entry
Component
struct Dom {State p: Person[] [new Person(小猫猫,21),new Person(小狗狗,12),new Person(小鲤鱼,13)]build() {Row() {Column() {ForEach(this.p,(item,index){Row(){Text(item.name)Button(修改).onClick((){item.name 我被修改了;})}})}.width(100%)}.height(100%)}
}我们先定义一个 p 字段 state修饰 类型为 数组 其中所有元素类型为 Person 然后 初始 我们默认写了三条数据进去 然后用 ForEach 循环渲染元素 Text展示 Button点击触发修改 当前循环这个元素的name属性 然后 我们尝试点击小鲤鱼的修改按钮 会发现 没有修改 还是因为 state并检查不到这么深
然后 还是老规矩 只有被 Observed装饰的类 实例化出来的对象 才能装饰 ObjectLink
Observed
class Person{name: stringage: numberconstructor(name: string, age: number) {this.name name;this.age age;}
}然后组件改成这样
Entry
Component
struct Dom {State p: Person[] [new Person(小猫猫,21),new Person(小狗狗,12),new Person(小鲤鱼,13)]build() {Row() {Column() {ForEach(this.p,(item,index){Row(){Domismin({p: item})Button(修改).onClick((){item.name 我被修改了;})}})}.width(100%)}.height(100%)}
}Component
struct Domismin {ObjectLink p: Person;build() {Text(this.p.name)}
}简单说 还是定义一个子组件 将数组下的每一个元素对象 都绑定上 ObjectLink 然后 我们再次点击 小鲤鱼边上的修改按钮 这样就修改成功了
