vue 子组件事件传递给父组件调用

在Vue中，子组件可以通过`$emit`方法将事件传递给父组件，然后父组件可以通过监听子组件的事件来调用相应的方法。下面是一个示例代码[^2]：

子组件：

<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-event', '传递给父组件的数据');
    }
  }
}
</script>

父组件：

<template>
  <div>
    <ChildComponent @child-event="handleChildEvent"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log(data); // 输出：传递给父组件的数据
    }
  }
}
</script>

在子组件中，通过`$emit`方法触发`child-event`事件，并传递数据给父组件。在父组件中，通过监听`child-event`事件，并在相应的方法中处理传递过来的数据。