首页 > 其他分享 >ArkTS #01# 组件通信

ArkTS #01# 组件通信

时间:2024-08-03 16:49:39浏览次数:14  
标签:ArkTS 01 backgroundColor 55 Button fontSize onClick 组件

一、通过Prop单向传递

/*
* 单双向绑定都有
* 父组件@State,子组件@Link,孙组件@Prop
* 数据流向:父组件 <--> 子组件 --> 孙组件
 */

@Entry
@Component
export struct BothBinding {
  @State fatherValue: number = 0//表示组件中的状态变量,这个状态变化会引起 UI 变更

  build() {
    Column() {
      // ====================== 待补全 ===================
      Text('单双向绑定').fontSize(55)
      Text('faValue: ' + this.fatherValue).fontSize(55).fontWeight(500)
        .fontColor(Color.Red).backgroundColor(Color.Yellow)
        .margin({
          top: 35,
          bottom: 20,
        })
      Row() {
        Button('+2').backgroundColor(Color.Pink).fontSize(55)
          .onClick(() => {
            this.fatherValue += 2
          }).margin({
          right: 40,
        })
        Button('减2').backgroundColor(Color.Transparent).fontSize(55)
          .onClick(() => {
            this.fatherValue -= 2
          })
      }.margin({
        bottom: 20
      })

      sonComponent({
        sonVal: $fatherValue
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0x1E90FF)
  }
}

//子组件
@Component
struct sonComponent {
  @Link sonVal: number

  build() {
    Column() {
      Text(`sonVal: ${ this.sonVal}`).fontSize(53).fontColor(Color.Red).backgroundColor(Color.Yellow)
      Row() {
        Button('+2').backgroundColor(Color.Pink).fontSize(55)
          .onClick(() => {
            this.sonVal += 2
          }).margin({
          right: 40,
        })
        Button('减2').backgroundColor(Color.Transparent).fontSize(55)
          .onClick(() => {
            this.sonVal -= 2
          })
      }

      grandsonComponent({
        val: this.sonVal
      })
    }
  }
}

//孙组件
@Component
struct grandsonComponent {
  @Prop val: number
  build() {
    Column() {
      Text('sonSon = ' + this.val).fontSize(55)

      Row() {
        Button('+2').backgroundColor(Color.Pink).fontSize(55)
          .onClick(() => {
            this.val += 2
          }).margin({
          right: 40,
        })
        Button('减2').backgroundColor(Color.Transparent).fontSize(55)
          .onClick(() => {
            this.val -= 2
          })
      }
    }
  }
}

二、通过Provide/Consume共享数据

//@Provide作为数据的提供方,可以更新其子孙节点的数据,并触发页面渲染。
//@Consume在感知到@Provide数据的更新后,会触发当前自定义组件的重新渲染。

@Entry
@Component
struct CompA {
  @Provide("reviewVote") reviewVotes: number = 0;

  build() {
    Column() {
      // ====================== 待补全 ===================
      Text('父组件值:' + this.reviewVotes).fontSize(55)
      Row() {
        Button('+').fontSize(55).onClick(() => {
          this.reviewVotes++
        })
        Button('-').fontSize(55).onClick(() => {
          this.reviewVotes--
        })
      }

      CompB()
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0x1E90FF)
  }
}

// CompB
@Component
struct CompB {
  @Consume('reviewVote') xx: number

  build() {
    Column() {
      Text('子组件值' + this.xx).fontSize(55)

      Row() {
        Button('+').fontSize(55).onClick(() => {
          this.xx++
        })
        Button('-').fontSize(55).onClick(() => {
          this.xx--
        })
      }

      CompC()
    }
  }
}

// CompC
@Component
struct CompC {
  @Consume('reviewVote') xx: number

  build() {
    Column() {
      Text('子子组件值' + this.xx).fontSize(55)

      Row() {
        Button('+').fontSize(55).onClick(() => {
          this.xx++
        })
        Button('-').fontSize(55).onClick(() => {
          this.xx--
        })
      }
    }
  }
}

三、监听器

// @Watch用于监听状态变量的变化
// @Watch注册一个回调方法onChanged, 当状态变量count被改变时, 触发onChanged回调。
//装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、
// @StorageProp以及@StorageLink所装饰的变量均可以通过@Watch监听其变化。

@Entry
@Component
struct watchBinding {
  @State @Watch('OnBasketUpdated') Num: number = 0
  @State Num2: number = 0

  OnBasketUpdated() {
    this.Num2 += 2
  }

  build() {
    Column() {
      Text('num1= ' + this.Num).fontSize(55)
      Text('num2= ' + this.Num2).fontSize(55)
      Row() {

        Button('num1 + 1').fontSize(55).onClick(() => {
          this.Num++
        })
      }
    }
  }
}

 

标签:ArkTS,01,backgroundColor,55,Button,fontSize,onClick,组件
From: https://www.cnblogs.com/xkxf/p/18340762

相关文章

  • IPC-6012F-CN-中文版\英文版,2024 刚性印制板的鉴定及性能规范
    IPC-6012F-CN-中文版,2024刚性印制板的鉴定及性能规范链接:https://pan.baidu.com/s/1z1x5JPmcRHzeIQgMsMQRxg提取码:1234https://share.weiyun.com/s7XNX9gE 2023年10月,IPC-6012发布了最新版F版。与以往版本不同的是,F版中国成立了分技术组,收集,讨论和提交了大量制修订的意......
  • C++动态规划(01背包)
    例题1:有 N 个物品,从 1 到 N 编号。对于每个 i(1≤i≤N),物品 i 的重量是 wi​ 价值是 vi​。太郎决定从 N 个物品里选一些放进背包带回家。太郎的背包的容量是 W,因此放进背包的物品的总重量不能超过 W。求太郎带回家的物品的总价值可能达到的最大值。1.贪......
  • D36 2-SAT P5782 [POI2001] 和平委员会
    视频链接:D362-SATP5782[POI2001]和平委员会_哔哩哔哩_bilibili   P5782[POI2001]和平委员会-洛谷|计算机科学教育新生态(luogu.com.cn)//2-SAT+tarjanO(n+m)#include<iostream>#include<cstring>#include<algorithm>usingnamespacestd;const......
  • 深入探究 Vue.js 高级技术:从响应式系统到高效组件设计的实战指南
    这里有一些实用的Vue.js高级示例,涵盖了前面提到的高级知识点,适合在实际项目中应用:1.自定义响应式数据使用Vue3的customRefAPI创建一个自定义的响应式输入框,带有防抖功能。import{customRef}from'vue';functionuseDebouncedRef(value,delay=300){......
  • AGC013B 题解
    注意到只要随便dfs,如果没有可以走的点,说明这个端点满足要求。因为有两个端点,所以从同一个点开始搜两次,拼在一起就行了。#include<bits/stdc++.h>usingnamespacestd;typedeflonglongll;constintN=1e5+5;vector<int>e[N];intn,m;boolvis[N];voiddfs(in......
  • K11505 The Lost cow[USACO-2017-USOpen-B]
    题目描述FarmerJohn最珍贵的奶牛Bessie丢了,他需要把它找回来。幸运的是,农场里只有一条长长的直路,他知道Bessie肯定在这条路上的某个地方。如果我们把这条路看成数轴,假设FarmerJohn所在位置是x,Bessie所在的位置是y(对于John是未知的),如果FarmerJohn知道Bessie的位置,那么他就......
  • LeetCode 1017. Convert to Base -2
    原题链接在这里:https://leetcode.com/problems/convert-to-base-2/description/题目:Givenaninteger n,return abinarystringrepresentingitsrepresentationinbase -2.Note thatthereturnedstringshouldnothaveleadingzerosunlessthestringis "0".......
  • joisc2017 D3T1 长途巴士 题解
    joisc2017D3T1长途巴士题解这是学校ACM欢乐赛的题,赛时想到做法了,但是因为我各种唐诗没写出来翻了转化题面我们发现,只可以踢掉检查站前面一个连续段的接水人,并且不能踢掉司机,考虑画出对整个路程表示的线段上图几个小点是检查点,考虑在每个检查点之前踢掉一段的人,容易发......
  • 前端性能优化---样式优化---01
    在前端开发中,性能优化是一个关键点,而样式优化则是性能优化中不可忽视的一环。笔者给出一些样式优化措施,包括减少重绘和重排、CSS选择器优化、使用CSS预处理器和后处理器、CSSSprite、CriticalCSS等技术。1.减少重绘和重排重绘(Repaint)和重排(Reflow)是浏览器渲染过程中的两......
  • LeetCode 热题 HOT 100 (015/100)【宇宙最简单版】
    【栈】No.0155最小栈【中等】......