harmonyOS 自定义组件构造函数

好 上文 harmonyOS 自定义组件基础演示讲解 我们讲了自定义组件的用法
本文 我们来说说自定义组件的构造函数

上文 最后 留下的代码是这样的

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        imist({content: "第一个组件接到值了"});
        imist({content: "第二个组件也接到啦"});
        imist({content: "我这边也OK"});
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct imist {
  private content:string = "青山不改，绿水长流";

  build() {
    Row() {
      Image($r('app.media.img'))
        .width(20)
        .height(20)
        .margin(15)
      Text(this.content)
        .fontColor(Color.White)
    }
    .backgroundColor(Color.Blue)
    .borderRadius(25)
    .margin({
      top: 15
    })
    .width("80%")
  }
}

这里 我们下面写了一个叫 imist 的组件 定义了一个string的content
默认值为 “青山不改，绿水长流”
然后 内部是一个基本的页面结构

然后上面调用了三次 给content传入了不同的值 运行结果如下

其实 我们还可以通过函数方式实现

我们可以改成这样的

@Entry
@Component
struct Index {

  @Builder imist(content:string) {
      Row() {
        Image($r('app.media.img'))
          .width(20)
          .height(20)
          .margin(15)
        Text(content)
          .fontColor(Color.White)
      }
      .backgroundColor(Color.Blue)
      .borderRadius(25)
      .margin({
        top: 15
      })
      .width("80%")
  }

  build() {
    Row() {
      Column() {
        this.imist("第一个组件接到值了");
        this.imist("第二个组件也接到啦");
        this.imist("我这边也OK");
      }
      .width('100%')
    }
    .height('100%')
  }
}

代码中 我们只有一个 Index 组件 然后 在这个组件中 我们除了build主体界面内容 还写了一个imist函数 它接受一个行参 代理名content字符串类型

然后 我们在界面主体调用这个函数 因为都在同一个组件中 直接 this.函数名就好了
然后给行参content传递值
运行结果如下

也是没有任何问题