Vue中的$emit

在Vue中，$emit是用于触发自定义事件的方法。通过$emit方法，子组件可以向父组件传递数据或触发特定的事件。

以下是一个示例代码，演示了在Vue中如何使用$emit方法：

父组件：

<template>
  <div>
    <child-component @custom-event-name="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(eventData) {
      // 在这里处理事件触发后的逻辑
      console.log('触发了自定义事件，事件数据为：', eventData);
    }
  }
};
</script>

子组件：

<template>
  <button @click="emitCustomEvent">触发自定义事件</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      // 使用$emit方法触发自定义事件，并传递数据
      this.$emit('custom-event-name', '自定义事件数据');
    }
  }
};
</script>

在上述示例中，父组件通过监听子组件触发的自定义事件`custom-event-name`，并在`handleCustomEvent`方法中处理事件触发后的逻辑。子组件通过点击按钮，调用`emitCustomEvent`方法，使用`$emit`方法触发自定义事件，并传递数据。