解密 Vue 组件事件机制，轻松掌握触发与监听

前端

2023-11-09 02:45:02

Vue 组件事件机制：揭秘 emit 和 on 的底层逻辑

在 Vue.js 的世界中，组件间通信是一个至关重要的功能，它允许组件相互传递信息和触发操作。今天，我们将深入探讨 Vue 事件机制的幕后机制，揭开 emit 和 on 这两个关键方法的神秘面纱。

事件触发机制

事件源

事件源是触发事件的组件。当用户与组件交互（例如点击按钮）时，该组件就会成为事件源。事件信息从事件源开始传递。

事件对象

事件对象是一个包含事件信息的 JavaScript 对象。它包含有关事件类型的详细信息、触发事件的元素以及目标元素。当事件触发时，事件对象将作为参数传递给事件处理函数。

事件处理函数

事件处理函数是一个响应事件的函数。当事件触发时，事件对象将作为参数传递给事件处理函数。该函数可以执行各种操作，例如显示或隐藏元素、更新数据或触发其他事件。

事件监听机制

事件监听器

事件监听器是一个函数，它被注册到特定事件。当该事件触发时，就会调用此函数。在 Vue 中，我们可以使用 $on 方法为组件注册事件监听器。

事件监听对象

事件监听对象是一个包含所有已注册事件监听器的对象。当组件触发事件时，该对象会调用相应的事件监听器。

事件处理

当事件触发时，事件监听对象会调用已注册的事件监听器。事件监听器执行事件处理操作，例如更新数据或触发其他事件。

代码示例

假设我们有两个 Vue 组件：一个按钮组件和一个显示文本的组件。当按钮被点击时，我们需要触发一个事件，在显示文本的组件中更新文本。以下是如何实现这一功能：

// Button.vue
<template>
  <button @click="triggerEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('update-text', 'Hello Vue!');
    }
  }
};
</script>

// TextDisplay.vue
<template>
  <p>{{ text }}</p>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  methods: {
    updateText(newText) {
      this.text = newText;
    }
  },
  mounted() {
    this.$on('update-text', this.updateText);
  },
  beforeDestroy() {
    this.$off('update-text', this.updateText);
  }
};
</script>

在 Button.vue 组件中，我们使用 emit 方法触发 `update-text` 事件，并传递新的文本作为参数。在 `TextDisplay.vue` 组件中，我们使用 on 方法注册一个事件监听器，并在 mounted 生命周期钩子中绑定它。当 update-text 事件触发时，事件处理函数 updateText 将被调用，更新组件中的文本。