vue emits

// ParentComponent.vue
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Custom event triggered with payload:', payload);
    }
  }
};
</script>

// ChildComponent.vue
<template>
  <div>
    <button @click="triggerCustomEvent">Trigger Custom Event</button>
  </div>
</template>

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

解释说明

1. ParentComponent.vue:

   • 在父组件中，我们引入了子组件 ChildComponent。
   • 使用 @custom-event="handleCustomEvent" 绑定自定义事件 custom-event 到父组件的方法 handleCustomEvent。
   • 当子组件触发 custom-event 时，父组件的 handleCustomEvent 方法会被调用，并接收传递的参数。

2. ChildComponent.vue:

   • 子组件中有一个按钮，点击按钮会调用 triggerCustomEvent 方法。
   • triggerCustomEvent 方法使用 this.$emit 触发自定义事件 custom-event，并传递一个对象作为参数。

通过这种方式，父组件可以监听子组件发出的事件，并根据需要处理这些事件。