1.基本使用

语法：

// 定义
@Component
struct MyComponent {
  // 状态变量
  @State message:string =''
  build(){
    // .... 描述 UI
  }
}


//----------使用-----------

// 1.不传递参数使用
// MyComponent() 

// 2.传递参数使用：通过传递参数的方式 设置子组件中 messsage 的值
// MyComponent({message:'xxx'})

说明:在自定义组件的命令时，不能和系统的组件名相同。

1.1.写在同一个文件中

// 1.定义组件
@Component
struct HelloComponent {
  // 自己的状态
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}


// 2.使用组件
@Entry
@Component
struct CustomComponentDemo {
  build() {
    Column() {
      HelloComponent()
      // 只要愿意，可以 使用任意多次
      HelloComponent()
      // 还可以传递参数给子组件，覆盖子组件成员变量的值
      HelloComponent({message:'hello itheima'})
    }
  }
}

说明：在将参数传递给子组件的时候，如果子组件有值，会将子组件的值覆盖。

1.2.写在不同的文件中

这需要在问一个目录下创建一个ets文件，用来放置我们自定义的组件类型。

HelloComponent.ets

@Component

//允许传出外部使用
export struct HelloComponent {
  // 自己的状态
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

主页面.ets


//从外部的文件进行调用
import {HelloComponent} from 'HelloComponent'

// 使用组件
@Entry
@Component
struct CustomComponentDemo {
  build() {
    Column() {
      HelloComponent()
      // 只要愿意，可以使用任意多次
      HelloComponent()
      // 还可以传递参数给子组件，覆盖子组件成员变量的值
      HelloComponent({message:'hello itheima'})
    }
  }
}

1.3.定义成员函数及变量

自定义组件除了必须实现build()函数以外，还可以定义其他的成员函数以及成员变量。

注意：

1.不支持静态函数，静态成员变量

2.成员函数，变量均为私有的

例如：

// HelloComponent.ets
@Component
export struct HelloComponent {
  // 成员变量
  info: string = '感觉自己闷闷哒'
  // 成员变量也可以是函数
  sayHello=()=>{}
  // 状态变量
  @State message: string = 'Hello, World!';

  // 成员函数
  sayHi() {
    console.log('你好呀')
  }

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Column() {
      Text(this.message)
      Text(this.info)
      Button('修改数据')
        .onClick(() => {
          this.info = '(* ￣3)(ε￣ *)'
          this.message = 'Hello,ArkTS'
          this.sayHi()
          this.sayHello()
        })

    }
  }
}


// 页面的.ets
import { HelloComponent } from './components/HelloComponent'

@Entry
@Component
struct CustomComponentDemo {
  build() {
    Column() {
      // 使用组件内部定义的初始值
      HelloComponent()
      // 使用传入的值，覆盖子组件的默认值
      HelloComponent({ info: '你好', message: 'ArkTS' })
      // 函数也可以传入
      HelloComponent({ sayHello(){ console.log('父组件传给子组件的逻辑') } })
    }
  }
}

1.4.通用的样式和事件

在自定义的组件上可以在主页面代码中通过点语法的形式设置通用的样式和通用的事件。

如：支持的有：

1.onclick() 2.backgroundColor()等通用属性

不支持的有：

1.onChange() 2.fontColor等

@Component自定义组件

1.基本使用

1.1.写在同一个文件中

1.2.写在不同的文件中

1.3.定义成员函数及变量

1.4.通用的样式和事件