鸿蒙开发|自定义组件基础&&@Prop的使用

今天的内容分为以下几点：

自定义组件的基础用法，让我们对其有一个初步了解在自定义组件中，@Prop的作用自定义组件

前言：在UI界面开发中，我们不可避免的会遇到组件的复用，逻辑业务与UI分离、对代码的升级与维护的情况。这时候使用自定义组件，可以提高我们的工作效率，提高代码的简便程度，以及方便我们更好的对代码进行维护与升级。

那么，自定义组件有哪些特点呢？

可组合：在鸿蒙中，允许开发者组合使用系统组件，以及其属性、方法。

可重用：自定义组件可以被其他组件重用，并且可以作为不同的实例在父组件中使用

数据驱动UI更新：在自定义组件中，通过状态变量的改变，也会引起UI的更新

下面正式介绍自定义组件的基本用法：

注意：在自定义组件中

不支持静态函数、静态成员变量

成员函数、变量均为私有

1.自定义组件的结构：@Compontent：@Compontent装饰器仅能装饰struct关键字声明的数据结构。struct: 被@Compontent修饰的struct具备组件化的能力，但是需要实现build方法描述UI 。用法：struct+自定义组件名{build(){....}}build()函数：用于自定义组件的声明UI描述，并且自定义组件必须定义build()函数

//自定义组件
@Component
struct Son {
  build() {
  
    
  }
}

2.自定义组件的使用：

在创建自定义组件前，我们必须要知道**@Entry**：@Entry作为修饰的自定义组件作为UI界面的入口，一个UI页面，只能有一个@Entry

//自定义组件
@Component
struct Son {
  build() {
  Text("好帅")
    
  }
}

在父组件中使用，我们可以在组件中复用多次自定义组件

在自定义组件中，我们通过build函数，可以添加想要的系统组件及样式，同时还可以定义其他的成员函数，以及成员变量

@Component
struct Son {
  //状态变量
  @State name: string = "真的帅"
  //成员函数
  sayHai: () => void = () => {
  }
  //普通变量
  username:string=""
  build() {
      //系统组件
    Column() {
      Text("好帅")
      Text(this.name)
    }.width("100%")
  }
}

那么在父组件中，我们可以通过传参数的方式，来覆盖自定义组件成员变量的值，使UI界面刷新

在使用子组件的时候，我们必须要明确，自定义组件通过点语法的形式只能设置通用样式，通用事件

@Entry
@Component
struct Index {
  build() {
    Column() {
      Son({ name: "父组件内容" })
        //通用的事件及样式属性，如onChange、fontColor、都无法使用
        .onClick(()=>{})
        .width("100%")
       .height("100%")
    }.width("100%")
     .height("100%")
  }
}

3.下面我们着重介绍下 父组件与子组件之间传递逻辑

父组件给子组件传递逻辑

将父组件中的函数传递给子组件，并在子组件中调用，将箭头函数写在哪，this就指向谁

  build() {
    Column() {
      Button("父组件" + this.num)
      Son({
        num: this.num, onAddL: () => {
          //父组件改变
          this.num--
        }
      })
    }.width("100%")
    .height("100%")

2.普通函数，谁调用函数，this就指向谁

  build() {
    Column() {
      Button("父组件" + this.num)
      Son({
        num: this.num, onAddL() {
          this.num--
        }
      })
    }.width("100%")
    .height("100%")
  }
}

3.最后我们来了解一下**@Prop**：@Prop 装饰的变量可以和父组件建立单向的同步关系。@Prop 装饰的变量是可变的，但是变化不会同步回其父组件。@prop修饰的状态变量改变，UI会刷新

简单来说就是子组件会随着父组件状态变量的改变而改变，但是如果子组件改变，父组件是不会改变的，并且父组件如果这时发生改变，会将变量的值覆盖给子组件

我们来一个一个实现一下吧

单向同步，子随父发生同步改变

2.直接在子组件下添加点击事件改变子组件数值，父组件不发生改变，

@Component
struct Son {
  @Prop num: number = 0
  build() {
    Column() {
      Button("子组件" + this.num)
      //子组件改变
        .onClick(() => {
          this.num--
        })
    }
  }
}

3.在子组件和父组件下都添加点击事件，当子组件改变的同时，父组件改变，子组件会随着父组件而改变

@Entry
@Component
struct Index {
  @State num: number = 100
  build() {
    Column() {
      Button("父组件" + this.num)
        .onClick(() => {
          this.num++
        })
      Son({ num: this.num })
    }.width("100%")
  }
}
@Component
struct Son {
  @Prop num: number = 0
  build() {
    Column() {
      Button("子组件" + this.num)
        .onClick(() => {
          this.num--
        })
    }
  }
}

如果想要实现在@prop修饰下，子组件的值发生改变，父组件也会发生改变。我们需要利用函数回调，将子组件的数据传给父组件