js 父级调用子集方法

在JavaScript中，父级调用子集（通常指的是子组件或子对象）的方法可以通过几种不同的方式实现，这主要取决于你是在使用面向对象的编程模式还是在处理Web组件，如React或Vue中的组件。

基础概念

父级调用子集方法指的是在父对象或父组件中直接调用其子对象或子组件的方法。这种通信方式在组件化开发中很常见，尤其是在前端框架中。

类型与应用场景

直接引用：在简单的JavaScript对象中，父对象可以直接持有子对象的引用，并调用其方法。
回调函数：子组件可以通过回调函数将方法暴露给父组件。
事件发射器：使用事件系统（如EventEmitter）来解耦父子组件之间的通信。
框架特定方法：在使用React或Vue等框架时，可以利用框架提供的特定机制来实现父子组件间的通信。

示例代码

直接引用

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!

回调函数（React示例）

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;

事件发射器（Vue示例）

<!-- 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中，可以使用useEffect钩子来确保在调用子组件方法前子组件已经挂载。
条件调用：在调用子组件方法前，检查子组件是否存在。

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

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

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

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

通过上述方法，可以有效地实现父级调用子集的方法，并解决可能出现的问题。