在Vue的组件化世界里，组件间的通信是构建复杂应用的关键。Vue为此提供了一套简洁的通信机制，其中$emit和$on作为这一机制的重要组成部分，扮演着事件派发与事件监听的角色。本文旨在深入解析$emit与$on的原理与应用，并通过示例代码，揭示它们在Vue通信中的本质作用。

$emit：事件派发的使者

在Vue中，$emit用于子组件向父组件派发事件。当子组件中发生了某个动作或状态变化，需要通知父组件时，就可以通过$emit来实现。它允许你发送自定义事件，并且能够携带数据作为参数。

原理：

• 子组件调用$emit，Vue内部会触发相应的事件监听器。
• 父组件通过在模板中使用v-on或在组件上直接监听这个事件，从而响应子组件的通知。

示例代码：

子组件：

<template>
  <button @click="notifyParent">点击我通知父组件</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      // 派发自定义事件，可以携带参数
      this.$emit('custom-event', 'Hello, parent!');
    }
  }
}
</script>

父组件：

<template>
  <ChildComponent @custom-event="handleCustomEvent"/>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(msg) {
      console.log(msg); // 输出：Hello, parent!
    }
  }
}
</script>

$on：事件监听的守望者

$on用于监听由$emit派发的事件。它允许组件在其生命周期内等待特定事件的发生，并定义当这些事件发生时应该执行的行为。

原理：

• 组件使用$on注册事件监听器。
• 当该事件被$emit派发时，所有注册了监听该事件的处理函数都会被调用。

注意：Vue 3中的Composition API不再支持$on，推荐使用provide和inject或其他全局状态管理来替代。

与on的搭配使用

$emit和$on的组合使用使得Vue组件间的通信变得灵活而高效。通过自定义事件的派发和监听，可以实现父子组件间，甚至兄弟组件间的解耦通信。

总结

通过对$emit与$on的深入分析，我们理解了Vue组件间通信的一种核心机制。尽管Vue 3鼓励使用更为现代的通信方式，但这两个方法在Vue 2中仍然是实现组件通信的重要手段。理解它们的工作原理，不仅能帮助你更好地利用Vue进行开发，还能加深你对Vue框架设计哲学的理解。

探索Vue的魅力远不止于此，无论是组件通信、状态管理还是其他高级特性，Vue都有着丰富而灵活的解决方案。如果你对$emit、$on或者Vue的其他特性有更多思考或问题，欢迎在评论区交流探讨。让我们一同在Vue的世界中不断前行，探索更多可能！

Tags：vue2inject

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。