vue 子组件调用父组件的方法并传值

在 Vue 中，子组件可以通过 `$emit` 方法向父组件发送自定义事件，并传递数据。以下是一种常见的方法：

首先，在父组件中定义一个方法，例如 `handleEvent`，用于接收子组件传递的数据：

<template>
  <div>
    <ChildComponent @custom-event="handleEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      // 处理子组件传递的数据
      console.log(data);
    }
  }
}
</script>

然后，在子组件中，使用 `$emit` 方法触发自定义事件，并传递需要传递给父组件的数据：

<template>
  <button @click="sendData">触发事件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      const data = 'Hello, Parent!'; // 需要传递给父组件的数据
      this.$emit('custom-event', data);
    }
  }
}
</script>

在子组件的 `sendData` 方法中，通过 `$emit` 方法触发了名为 `custom-event` 的自定义事件，并传递了数据 `data`。父组件通过 `@custom-event="handleEvent"` 监听该事件，并在 `handleEvent` 方法中接收到子组件传递的数据。

这样，子组件就可以调用父组件的方法，并传递需要的值了。