vue子组件中如何调用父组件的方法，并传递参数

在 Vue 中，子组件可以通过 `$emit` 方法向父组件触发自定义事件，并传递参数。父组件可以通过在子组件上使用 `@` 或者 `v-on` 指令监听该自定义事件，并调用相应的方法。

下面是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      // 在父组件中处理自定义事件
      console.log('Received data from child component:', data);
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="emitCustomEvent">触发自定义事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      // 在子组件中触发自定义事件，并传递参数
      this.$emit('custom-event', 'Hello from child component!');
    }
  }
}
</script>

在上面的示例中，子组件中的按钮点击事件触发了自定义事件 `custom-event`，并传递了参数 `'Hello from child component!'`。父组件中的 `handleCustomEvent` 方法接收到该参数并进行处理。注意，在父组件中监听自定义事件时，使用的是子组件标签上的 `@custom-event` 或 `v-on:custom-event`，这与子组件中 `$emit` 方法的参数一致。