vue子组件调用父组件方法

在 Vue 中，可以通过 `props` 将数据从父组件传递给子组件，但是如果想要让子组件调用父组件的方法，可以使用 `$emit`。

下面是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component @childClick="handleChildClick"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleChildClick() {
      console.log('child clicked');
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('childClick');
    },
  },
};
</script>

在子组件中，使用 `$emit` 触发一个自定义事件 `childClick`，这个事件会向父组件发送信号，父组件监听这个事件，当子组件点击按钮时，父组件的 `handleChildClick` 方法就会被调用。

注意，在子组件中，事件名称需要以 `on` 开头，比如 `@click`、`@change`，但是在 `$emit` 中，事件名称不需要 `on`，直接写自定义事件名称即可。