HarmonyOS Next V2 @Event

背景

在上一節(jié)中，我們針對父子組件，講了關(guān)于傳遞數(shù)據(jù)的知識。我們了解到

1. @Local 是管理自己內(nèi)部的數(shù)據(jù)的，
2. @Param 是負責(zé)接收父組件的數(shù)據(jù)的，而且子自己內(nèi)部不能直接修改

按照一個組件最基本的功能， 既能接收外部傳入的數(shù)據(jù) ， 也要向外部傳遞數(shù)據(jù) 。那么 @Event 修飾符就是來解決這個問題的了。

介紹

@Event 是 子組件向父組件傳遞數(shù)據(jù)的技術(shù)，它只能用在 @ComponentV2 修改的組件上，其中的思想是

1. 完成修改數(shù)據(jù)的操作，還是放在父組件內(nèi)部，通過定義一個函數(shù) func 來實現(xiàn)
2. 在父組件調(diào)用子組件的時候，也順帶把這個函數(shù) func 傳遞給子組件
3. 子組件在內(nèi)部 使用 @Event 來修飾 該函數(shù)，并且在需要的使用直接調(diào)用即可

父組件

1. 定義內(nèi)部數(shù)據(jù) num
2. 定義修改內(nèi)部數(shù)據(jù)num的函數(shù) func
3. 使用子組件時，把num和func都傳遞過去

@Entry
@ComponentV2
struct Index {
@Local num: number = 100
// 自己定義的函數(shù) 負責(zé)修改數(shù)據(jù)， 該函數(shù)也要傳遞給子組件
func = (unit: number) => {
this.num -= unit
}

build() {
Column() {
Button("父組件 修改" + this.num)
.onClick(() => {
this.num++
})
// 使用子組件，并且傳遞數(shù)據(jù) 和 傳遞函數(shù)
Son({ num: this.num, func: this.func })
.padding(10)
}
.width("100%")

}
}

## 子組件

1. 使用 `@Param` 接收父組件傳遞的 `num`
2. 使用`@Event` 接收父組件傳遞的函數(shù) `func`
3. 定義點擊事件的處理函數(shù) `onfunc`，內(nèi)部直接調(diào)用父組件傳遞過來的函數(shù)

@ComponentV2
struct Son {
@Param num: number = 0
@Event func: (num: number) => void = () => {
}
onfunc = () => {
this.func(5)
}

build() {

Column() {
  Button(`子組件 ${this.num}`)

  Button("子組件修改父組件中的狀態(tài)")
    .onClick(this.onfunc)
}
.border({
  width: 1,
  style: BorderStyle.Dashed
})

}
}

## 流程

![image-20240723105343511](https://wsy996.obs.cn-east-3.myhuaweicloud.com/HarmonyOS%20Next%20V2%20%40Event/readme.assets/image-20240723105343511.png?x-image-process=style/style-8860)

## @Once

`@Once` 和 `@Param`作用類似，都可以表示接收父組件傳遞過來的數(shù)據(jù)，但是也存在區(qū)別

1. `@Once` 只會接收第一次父組件傳遞過來的數(shù)據(jù)，后續(xù)父組件的數(shù)據(jù)修改，不會同步到 `@Once`修改的變量上
2. `@Once` 需要和 `@Param` 一起搭配使用，因為 `@Param` 修飾的是父組件傳遞給子組件的變量，該變量不能直接被修改。所以`@Once`修飾的變量，也不能在子組件內(nèi)部直接修改。

@ComponentV2
struct Son {
@Once @Param num: number = 0

build() {
Column() {
Button(子組件 ${this.num})
.onClick(() => {
this.num++ // 修改無效
})
}
.border({
width: 1,
style: BorderStyle.Dashed
})
}
}

@Entry
@ComponentV2
struct Index {
@Local num: number = 100

build() {
Column() {

Son({ num: this.num })
    .padding(10)
}
.width("100%")

}
}

![image-20240723110522686](https://wsy996.obs.cn-east-3.myhuaweicloud.com/HarmonyOS%20Next%20V2%20%40Event/readme.assets/image-20240723110522686.png?x-image-process=style/style-8860)

## 總結(jié)

1. `@Param` 表示父組件傳遞給子組件的數(shù)據(jù)，當父組件修改了，子組件會跟隨響應(yīng)，同時子組件內(nèi)部不能直接修改 `@Param`修飾的變量
2. `@Event` 表示子組件想要修改父組件數(shù)據(jù)的一種技術(shù)，它用來修改函數(shù)，該函數(shù)是由父組件定義和傳遞給子組件的
3. `@Once` 必須和 `@Param` 搭配使用，表示父組件傳遞過來的數(shù)據(jù)，只會第一次生效。

審核編輯 黃宇