harmony页面开发父组件如何传递事件方法给子组件，通过子组件可以进行回调反馈？

import { View, Text } from '@arkui/components';
import ChildComponent from './ChildComponent';
import { useState } from '@arkui/hooks';

function ParentComponent() {
  const [message, setMessage] = useState('No feedback yet.');

  // 父组件的方法，将传递给子组件
  function handleChildEvent(data: string) {
    console.log('Data from child: ', data);
    setMessage(`Feedback from child: ${data}`);
  }

  return (
    <View>
      <Text>Parent Component</Text>
      <ChildComponent onEvent={handleChildEvent} />
      <Text>{message}</Text>
    </View>
  );
}

export default ParentComponent;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

import { View, Button } from '@arkui/components';
import { useEffect } from '@arkui/hooks';

interface ChildComponentProps {
  onEvent: (data: string) => void;
}

function ChildComponent({ onEvent }: ChildComponentProps) {
  // 子组件的方法，调用父组件传递过来的方法
  function triggerEvent() {
    if (onEvent) {
      onEvent('Hello from child!');
    }
  }

  useEffect(() => {
    // 模拟调用父组件方法
    triggerEvent();
  }, []);

  return (
    <View>
      <Button onClick={triggerEvent}>Send Feedback to Parent</Button>
    </View>
  );
}

export default ChildComponent;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

@Component  
struct Child {  
  @State private text: string = '初始值'  
  private controller: ChildController = new ChildController();  
  
  aboutToAppear() {  
    // 子组件调用的方法为父组件传递过来的方法  
    this.controller.testFunc('im the son')  
    // 将testFunc方法用子组件方法进行覆盖  
    if (this.controller) {  
      this.controller.testFunc = this.testFunc  
    }  
  }  
  
  // 子testFunc方法的具体实现  
  testFunc = (value: string) => {  
    this.text = value  
    console.log('[testFunc]testFunc call from Child')  
    return "[testFunc]我是儿子的方法"  
  }  
  
  build() {  
    Column() {  
      Text(this.text)  
    }  
  }  
}  
  
// 定义声明testFunc方法的controller  
class ChildController {  
  // 定义子testFunc方法同名的空方法  
  testFunc = (value: string) => {  
    console.log('[testFunc]testFunc: ' + value)  
    return "[testFunc]我是公共定义的空方法"  
  }  
}  
  
@Entry  
@Component  
struct Parent {  
  private ChildRef = new ChildController()  
  
  aboutToAppear(): void {  
    this.ChildRef.testFunc = this.testFunc  
  }  
  
  // 父testFunc方法的具体实现  
  testFunc = (value: string) => {  
    console.log('[testFunc]我是父亲的testFunc方法 : ' + value)  
    return "[testFunc]我是父亲的方法"  
  }  
  
  build() {  
    Column() {  
      Text('获取Child的exposedMethods!').fontSize('18vp').fontColor(Color.Gray)  
      Divider()  
      // 将父方法作为参数传递给子组件  
      Child({ controller: this.ChildRef })  
      // 父组件调用子组件的方法  
      Button('Parent调用children的方法').onClick(() => {  
        let text = this.ChildRef.testFunc('Parent调用children的方法')  
        console.info('[testFunc]testFunc info:' + JSON.stringify(text))  
      })  
    }  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.