【鸿蒙】HarmonyOS NEXT星河入门到实战8-自定义组件-组件通信

目录

1、模块化语法

1.1 模块化基本认知

1.2 默认导出和导入

1.2.1 在ets下新建tools目录

1.2.2 在tools下新建moduls.ets文件

1.2.3 index.ets

1.3 按需导出和导入

1.4 全部导入

2、自定义组件 -基础

2.1 自定义组件 - 基本使用

 2.2 自定义组件 -通用样式

2.2.1 ets下新建components文件夹

2.2.2 components新建HelloCom.ets

2.2.3 Index.ets

2.3 自定义组件 -成员函数变量

3、@BuilderParam

3.1 @BuilderParam 传递UI

3.2  多个 @BuilderParam 参数

4、 状态管理

4.1 状态管理概述

4.2 @ State 自己的状态

4.3 @Prop -父子单向

---

前言：自定义组件-组件通信（模块化语法）、自定义组件、传递UI、状态管理

1、模块化语法

1.1 模块化基本认知

1.2 默认导出和导入

1.2.1 在ets下新建tools目录

 

1.2.2 在tools下新建moduls.ets文件

interface  Person {
  name: string
  age: number
}

let num: number = 10
let person: Person ={
  name: '春天的菠菜',
  age: 18
}
// 默认导出（导出一个值）
export  default num

1.2.3 index.ets

导入进来  import 导入进来新取的名称  from 路径（相对路径）

import window from '@ohos.window';
// 相对路径
import myNum from '../tools/moduls'

@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
   Column(){
     Text('来自tools/modlus 模块的值：'+ myNum)
       .textExtend()
   }
   .width('100%').height(100)
  }
}

 

1.3 按需导出和导入

 tools下新建/module3.ets

// 按需导出
// 多个特性, 逐个 export 按需导出
// export let name1: string = '刘备'
// export let price: number = 9.98
// export let sayHi = () => {
//   console.log('打招呼')
// }

let name1: string = '刘备'
let name2: string = '张飞'
let name3: string = '关羽'

let price: number = 9.98
let price2: number = 10.1

let sayHi = () => {
  console.log('打招呼')
}
let run = () => {
  console.log('跑步')
}

// 一次性将多个特性, 进行导出
export {
  name1, name2, name3,
  price, price2,
  sayHi, run
}

 

import window from '@ohos.window';
// 相对路径
import myNum from '../tools/moduls'
import { name1, price, sayHi }from '../tools/module3'

sayHi()

@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
   Column(){
     Text('来自tools/modlus 模块的值：'+ myNum)
       .textExtend().margin(5)
     Text('来自tools/module3 模块的值：'+ name1 +'**' + price )
       .textExtend()
   }
   .width('100%').height(100)
  }
}

 

1.4 全部导入

 

2、自定义组件 -基础

2.1 自定义组件 - 基本使用

1、无@Entry 2、 struct 后面自定义名称

import window from '@ohos.window';


@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
    Column() {
      MyHeader()
      MyMain()
      MyFooter()
    }
  }
}


@Component
struct MyCom {
  @State count: number = 1
  build() {
    Row() {
      Text(this.count.toString())
        .fontColor(Color.White)
        .margin(10)
      Button('按钮')
        .onClick(() => {
          this.count++
        })
    }
  }
}

@Component
struct MyHeader {
  build() {
    Row() {
      Text('我是头部')
        .fontColor(Color.White)
    }
    .width('100%')
    .height(50)
    .backgroundColor(Color.Brown)
  }
}

@Component
struct MyMain {
  build() {
    Column() {
      // 将相同的业务逻辑, 封装成一个通用的组件
      MyCom()
      MyCom()
      MyCom()
    }
    .layoutWeight(1)
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}

@Component
struct MyFooter {
  build() {
    Row() {
      Text('我是底部')
    }
    .width('100%')
    .height(50)
    .backgroundColor(Color.Green)
  }
}

 

 2.2 自定义组件 -通用样式

 

2.2.1 ets下新建components文件夹

2.2.2 components新建HelloCom.ets

@Preview
@Component
export struct HelloCom {
  build() {
    Row() {
      Text('自定义组件')
      Button('按钮')
    }
    .width(200)
    .height(50)
    .backgroundColor(Color.Orange)
  }
}

2.2.3 Index.ets

import window from '@ohos.window';
import { HelloCom } from '../components/HelloCom'

@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
    Column() {
      HelloCom()
        .width(250)
        .height(60)
        .backgroundColor(Color.Gray)
        .onClick(() => {
          AlertDialog.show({
            message: '测试点击'
          })
        })
    }
  }
}

2.3 自定义组件 -成员函数变量

带=符号的可以外部传参

import window from '@ohos.window';


@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
    Column() {
      MyPanel({
        title: '我的订单',
        extra: '全部订单',
        getMore() {
          AlertDialog.show({
            message: '点击了全部订单'
          })
        }
      })
      MyPanel({
           title: '小米有品众筹',
        extra: '七款众筹中',
        getMore() {
          AlertDialog.show({
            message: '点击了众筹'
          })
        }
  }
      )

    }
    .width('100%').height('100%')
    .backgroundColor('#ccc')
    .padding(20)
  }
}

@Component
struct MyPanel {
  // 成员变量 -数据
  title: string = '默认的大标题'
  extra: string = '查看更多'

  // 成员变量 -函数 可以传入覆盖
  getMore = () =>{
    AlertDialog.show({
      message: '查看更多'
    })

  }

  // 成员函数  --  不可以外部传入覆盖
  sayHi (){
    AlertDialog.show({
      message: '打招呼 你好'
    })
}

  build() {
    Column(){
      Row(){
        Text(this.title)
          .fontSize(18)
        Text(this.extra)
          .fontSize(18)
          .onClick( () => {
            this.getMore()
          })

      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      Row(){
        Text('内容部分')
          .fontSize(18)
        Button('按钮')
          .onClick(() => {
            this.sayHi()
          })
      }
      .padding(20)

    }
    .width('100%').height(200)
    .margin({bottom: 20})
    .borderRadius(10)
    .padding(10)
    .backgroundColor(Color.White)
    
  }
}

3、@BuilderParam

3.1 @BuilderParam 传递UI

3.2  多个 @BuilderParam 参数

4、 状态管理

4.1 状态管理概述

4.2 @ State 自己的状态

4.3 @Prop -父子单向