vue子组件怎么调用父组件的方法

在Vue中，子组件可以通过事件机制来调用父组件的方法。具体步骤如下：

1. 在父组件中定义一个方法，该方法将作为子组件调用的目标方法。例如，我们在父组件中定义一个名为`parentMethod`的方法。

2. 在子组件中，通过`$emit`方法触发一个自定义事件并传递参数。例如，我们在子组件中调用`this.$emit('custom-event', data)`，其中`custom-event`是自定义事件的名称，`data`是要传递给父组件方法的参数。

3. 在父组件模板中，通过`v-on`指令监听子组件触发的自定义事件，并将其与父组件的方法绑定。例如，我们可以在父组件模板中添加`v-on:custom-event="parentMethod"`。

这样，当子组件触发自定义事件时，父组件的`parentMethod`方法就会被调用，并且可以接收子组件传递过来的参数。

以下是一个简单的示例：

// 父组件
<template>
  <div>
    <p>{{ message }}</p>
    <child-component v-on:custom-event="parentMethod"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    parentMethod(data) {
      this.message = data;
    }
  }
};
</script>

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

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Hello from child component');
    }
  }
};
</script>

在上述示例中，当点击子组件的按钮时，子组件会触发`custom-event`事件，并将字符串参数传递给父组件的`parentMethod`方法。父组件的`message`数据会更新，并显示在页面上。