vue2子组件如何调用父组件的方法

在 Vue.js 中，子组件要想调用父组件的方法，通常有两种方式：

1. **通过 props（属性）传递**：虽然这不是直接的方法调用，但可以通过 `emit` 事件从子组件触发，并在父组件监听这个事件。首先在子组件里，通过 `this.$emit('parent-method-name', 参数)` 触发一个自定义事件，然后在父组件的模板上使用 `v-on` 或者 `@parent-method-name="处理函数"` 来监听这个事件。

<!-- 子组件 -->
<button @click="$emit('parent-method', someData)">调用父方法</button>

// 父组件
<child-component @parent-method="handleParentMethod"></child-component>

<script>
export default {
  methods: {
    handleParentMethod(data) {
      // 父组件在此处理接收到的数据
    }
  }
}
</script>

2. **使用自定义事件 bus**：如果需要在多个组件间共享数据并通信，可以创建一个名为 `$bus` 的全局事件总线，所有组件都可以向它发送消息。在子组件内部调用 `this.$bus.$emit('method-name')`，而在父组件中监听该方法。

// 在 main.js 或某个单独的文件中创建 event bus
import { createApp } from 'vue';
const app = createApp(App);
app.config.globalProperties.$bus = new Vue();

// 使用
<ChildComponent @send-to-parent="handleMessage" />
methods: {
  handleMessage(msg) {
    this.$bus.$emit('parent-method', msg);
  }
}

// 在子组件
<button @click="$bus.$emit('send-to-parent', 'data')">