如何从父组件调用子组件中的方法？

// 父组件
<template>
  <div>
    <ChildComponent :callback="handleCallback" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCallback() {
      // 父组件中的方法逻辑
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="callback">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  props: ['callback'],
  methods: {
    // 子组件中的方法逻辑
  }
}
</script>

// 父组件
<template>
  <div>
    <ChildComponent ref="childComponentRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponentRef.childMethod();
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      // 子组件中的方法逻辑
    }
  }
}
</script>

// 创建事件总线实例
// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

// 父组件
<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import { eventBus } from './eventBus.js';

export default {
  methods: {
    callChildMethod() {
      eventBus.$emit('callChildMethod');
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

<script>
import { eventBus } from './eventBus.js';

export default {
  created() {
    eventBus.$on('callChildMethod', () => {
      this.childMethod();
    });
  },
  methods: {
    childMethod() {
      // 子组件中的方法逻辑
    }
  }
}
</script>