首页 > 其他分享 >ArkTS父子组件双向绑定案例

ArkTS父子组件双向绑定案例

时间:2024-01-14 21:23:27浏览次数:29  
标签:ArkTS buttonState 绑定 value width 按钮 组件 parentRedWidth

 

/**
 * 父子组件双向互绑定
 */
// 自定义按钮的信息类型
class ButtonState  {

  value:string
  width:number

  constructor(value:string,width:number) {
    this.value = value
    this.width = width
  }
}

@Component
struct MyChildGreenButton {
  // 拥有绿色按钮的组件,Link装饰器实现双向同步
  @Link
  buttonState: ButtonState
  build(){
    Button(`${this.buttonState.value}`)
      .width(this.buttonState.width)
      .height(150)
      .backgroundColor(Color.Green)
      .onClick(()=>{
        if (this.buttonState.width < 700) {
          this.buttonState.width += 100
        }
         else {
           this.buttonState = new ButtonState('绿色按钮', 100)
         }
      })
  }
}

@Component
struct MyChildRedButton {
  // 拥有红色按钮的组件,Link装饰器实现双向同步
  @Link
  value : string
  @Link
  buttonWidth:number

  build(){
    Button(`${this.value}`)
      .width(this.buttonWidth)
      .height(150)
      .backgroundColor(Color.Red)
      .onClick(()=>{
        this.buttonWidth += 50
      })
  }
}

@Entry
@Component
struct MyParent {
  @State parentGreenButton:ButtonState = new ButtonState('壹号子组件',300)
  @State parentRedValue: string = '二号子组件'
  @State parentRedWidth: number = 200 // h红按钮的宽度

  build(){
    Column() {
      // 父组件中调整按钮的宽度
      Button(`父组件中修改绿色按钮的宽度:${this.parentGreenButton.width}`)
        .onClick(()=>{
          this.parentGreenButton.width = this.parentGreenButton.width < 700 ? this.parentGreenButton.width + 100 : 100
        })

      Button(`父组件中修改红色按钮的宽度:${this.parentRedWidth}`)
        .onClick(()=>{
          this.parentRedWidth = this.parentRedWidth < 700 ? this.parentRedWidth + 100 : 100
        })

      Divider()
      MyChildGreenButton({buttonState: $parentGreenButton})
      MyChildRedButton({value:$parentRedValue, buttonWidth: $parentRedWidth})
    }
  }
}

 

标签:ArkTS,buttonState,绑定,value,width,按钮,组件,parentRedWidth
From: https://www.cnblogs.com/zhzhang/p/17964218

相关文章

  • ArkTS Prop组件使用案例
      /***Prop组件使用案例*/@ComponentstructMyChild{@Propage:number//状态变量privateincrease:number=1build(){Column(){if(this.age>=18){Text(`子组件中的age已经成年了:${this.age}`).height(80)......
  • 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......
  • 面向对象之绑定方法和非绑定方法
    【一】绑定方法与非绑定方法介绍【1】绑定方法绑定给谁,谁调用就将谁作为第一个参数传入(1)绑定到类的方法使用classmethod装饰器来装饰将类作为第一个参数传入对象也可调用,会将实例化对象的类作为第一个参数传入(2)绑定到对象的方法通过对象.方法的方法实现,将对象作为......
  • 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,},你写......