首页 > 其他分享 >ArkTS Prop组件使用案例

ArkTS Prop组件使用案例

时间:2024-01-14 21:23:11浏览次数:32  
标签:ArkTS age height increase init 组件 80 Prop

 

 

/**
 * Prop组件使用案例
 */
@Component
struct MyChild {

  @Prop
  age:number // 状态变量

  private increase:number = 1

  build() {
    Column() {
      if (this.age >= 18) {
        Text(`子组件中的age已经成年了:${this.age}`)
          .height(80)
      } else {
        Text(`子组件未成年:${this.age}`).height(80)
      }

      Button('--修改子组件age')
        .onClick(() => {
          this.age -= this.increase
        })
        .height(80)
        .width(250)
        .margin(5)
    }
  }
}


@Entry
@Component
struct MyParent {
  @State
  init_age:number = 16

  build(){
    Column() {
      Text(`父组件中的初始age:${this.init_age}`)
        .height(80)
      Button('修改父组件的init_age')
        .onClick(()=>{
          this.init_age += 1
        })
        .height(80)
        .width(250)
        .margin(5)

      Divider()

      MyChild({age:this.init_age, increase: 2})

      Divider()
      Divider()
      // MyChild({increase: 3})
    }
  }
}

 

标签:ArkTS,age,height,increase,init,组件,80,Prop
From: https://www.cnblogs.com/zhzhang/p/17964223

相关文章

  • Angular 17+ 高级教程 – Component 组件 の Control Flow
     前言ControlFlow是Angularv17版本后推出的新模板语法,用来取代NgIf、NgForOf、NgSwitch这3个StructureDirective。StructureDirective的好处是比较灵活,原理简单,但是即便用了微语法,它看上去还是相当繁琐,而且不够优雅。ConrolFlow的好处是它的语法够美,缺点是不......
  • uniapp的video组件在层级太高,无法遮挡的问题
    uniapp-vue项目中需要播放视频,uniapp的video组件在层级太高,无法遮挡,所以使用原生dom的video标签在APP中播放视频,可以被其他元素进行覆盖、遮挡,页面具有更高的定制性<!--eslint-disable--><template><viewv-html="videoHtml"id="dom-video"class="dom-video......
  • Spring-Boot框架的组件注册和条件注解------Spring-Boot框架
    packagecom.example.boot3.Config;//importcom.alibaba.druid.FastsqlException;importcom.example.boot3.bean.User;importorg.springframework.boot.SpringBootConfiguration;importorg.springframework.context.annotation.Bean;importorg.springframework.co......
  • 多种 React 组件通信方式实践
    使用ReactContext基于ReactContext实现跨组件通信的一个常见用例是创建一个能够在不同组件间共享和触发行为的上下文。以下是一个简化的例子,展示了如何在app.tsx中触发其他组件(例如,一个弹窗组件)中的方法。1.创建一个Context首先,我们创建一个新的Context。这个Context将......
  • 如何让spring扫描到自定义注解的组件
    ClassPathScanningCandidateComponentProviderscanner=newClassPathScanningCandidateComponentProvider(true);scanner.addIncludeFilter(newAnnotationTypeFilter(Tenant.class));Set<BeanDefinition>beanDefinitions=scanner.findCandidat......
  • Flutter 自定义一个右侧可滑动 左侧为按钮的组件
    Flutter自定义一个右侧可滑动左侧为按钮的组件vartopicList=["圈子话题1","圈子话题2","圈子话题3","圈子话题4-天气很好","圈子话题5","圈子话题6"];@overrideWidgetbuild(BuildContextcontext){returnSizedBox(height:40......
  • 小程序开发:在插件市场寻找步骤条组件并二开
    想实现一个可滚动的步骤条用来显示自己的随笔作为一名全栈工程师,要是全部都自己写,那太废时间了,首先去uniapp的插件市场逛逛看有没有符合需要的组件先:第一个: 看着符合自己的要求了,该有的有了,但是感觉左边的色调太单调了,故pass。第二个: 这个看起来颜色就比较丰富一些了,右边......
  • 2024-01-13 antd的tabel组件业务问题之勾选了table中的一项,然后弹出弹窗,接着关闭弹窗,
    如图:问题:table显示的勾选状态的数据无法被改变。原因:你没有改变到勾选数据,你只是在勾选时把选中的值赋值给了一个变量,然后以为自己清空了变量,以为自然而然地就取消勾选状态了,实际上就是你代码没写全!解决方案:原来写法:rowSelection:{onChange:handleChange,},你写......
  • Windows 10 中,可以使用 PowerShell 添加打印和文件服务的角色功能组件,包括 Internet
    在Windows10中,可以使用PowerShell添加打印和文件服务的角色功能组件,包括Internet打印客户端、LPD打印服务和LPR端口监视器。以下是添加这些功能组件的PowerShell命令:首先,以管理员身份打开PowerShell终端。在开始菜单中搜索"PowerShell",然后右键点击"WindowsPo......
  • python中进度条组件tqdm使用
    有的时候我们需要记录相关的执行过程,在整个过程中如果使用到了进度条,就更直观看到运行的现状。比如一下代码:importtimeif__name__=="__main__":#dosomething,进度为30time.sleep(1)print("执行了30%")#doanotherthing,进度为20time.slee......