Vue.JS中的emit

在Vue.js中，emit 是用于在子组件中触发自定义事件的方法。它允许子组件向父组件发送消息，或者在兄弟组件之间进行通信。通过emit，你可以定义自己的事件，并在适当的时候触发这些事件。

基本上，emit 是在子组件中定义一个自定义事件，然后通过调用 emit 方法触发这个事件。父组件可以监听并响应这个事件，从而执行一些特定的逻辑。

以下是一个简单的示例，说明了emit的基本用法：

<!-- ChildComponent.vue (子组件) -->
<template>
  <button @click="notifyParent">Click me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      // 触发自定义事件 'custom-event'，并传递一些数据
      this.$emit('custom-event', 'Hello from child!');
    }
  }
}
</script>

<!-- ParentComponent.vue (父组件) -->
<template>
  <div>
    <p>{{ messageFromChild }}</p>
    <!-- 在父组件中监听子组件触发的自定义事件 'custom-event' -->
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ''
    };
  },
  methods: {
    handleCustomEvent(message) {
      // 父组件响应子组件触发的事件
      this.messageFromChild = message;
    }
  }
}
</script>

在这个例子中，ChildComponent 中的按钮被点击时，它调用了 notifyParent 方法，并通过 this.$emit('custom-event', 'Hello from child!') 触发了名为 'custom-event' 的自定义事件。父组件 ParentComponent 中通过监听 @custom-event，执行了 handleCustomEvent 方法，从而获取了子组件传递的消息，并更新了 messageFromChild 的值。

这种通过自定义事件进行组件通信的方式使得组件可以更灵活、解耦，同时提高了代码的可维护性。