js 父级调用 子集方法

class Child {
  sayHello() {
    console.log('Hello from child!');
  }
}

class Parent {
  constructor() {
    this.child = new Child();
  }

  callChildMethod() {
    this.child.sayHello();
  }
}

const parent = new Parent();
parent.callChildMethod(); // 输出: Hello from child!

import React, { useState } from 'react';

function Child({ onSayHello }) {
  return <button onClick={onSayHello}>Say Hello</button>;
}

function Parent() {
  const sayHello = () => {
    console.log('Hello from child!');
  };

  return <Child onSayHello={sayHello} />;
}

export default Parent;

<!-- Child.vue -->
<template>
  <button @click="emitEvent">Say Hello</button>
</template>

<script>
import { EventEmitter } from 'events';

const emitter = new EventEmitter();

export default {
  methods: {
    emitEvent() {
      emitter.emit('sayHello');
    }
  }
};
</script>

<!-- Parent.vue -->
<template>
  <Child />
</template>

<script>
import Child from './Child.vue';
import { EventEmitter } from 'events';

const emitter = new EventEmitter();

export default {
  components: {
    Child
  },
  created() {
    emitter.on('sayHello', this.handleSayHello);
  },
  methods: {
    handleSayHello() {
      console.log('Hello from child!');
    }
  }
};
</script>

// React 示例
import React, { useRef, useEffect } from 'react';

function Parent() {
  const childRef = useRef(null);

  useEffect(() => {
    if (childRef.current) {
      childRef.current.sayHello();
    }
  }, []);

  return <Child ref={childRef} />;
}