洞悉Vue组件通信基石：$on和$emit

2024-02-20 07:24:56

前言
Vue.js作为一款风靡前端的框架，以其灵活的组件化开发理念和强大的数据驱动特性，受到广大开发者的青睐。组件化开发是Vue.js的一大亮点，它允许开发者将应用程序分解为更小的、可复用的组件，从而提高代码的可维护性和可复用性。组件间通信是组件化开发中不可或缺的一部分，而事件总线和on/emit则是Vue.js中实现组件间通信的基石。

初探事件总线

事件总线是一种设计模式，它提供了一种在组件间传递数据和事件的机制。在Vue.js中，事件总线是一个全局对象，它允许组件在不直接引用彼此的情况下进行通信。这使得组件之间可以保持松耦合，提高代码的可维护性和灵活性。

揭秘on和emit

on和emit是Vue.js中用于组件间通信的两个核心方法。on用于监听事件，而emit用于触发事件。组件可以通过on方法监听事件总线上的事件，当事件触发时，相应的监听器函数会被调用。组件可以通过emit方法触发事件总线上的事件，从而通知其他组件。

实例演绎

为了更好地理解on和emit的使用，我们来看一个简单的示例。假设我们有一个父组件和一个子组件，父组件需要向子组件传递数据并监听子组件的事件。

// 父组件
<template>
  <div>
    <button @click="greet">打招呼</button>
    <p>{{ message }}</p>
    <ChildComponent @greet="onGreet" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      message: '你好，世界！',
    };
  },
  methods: {
    greet() {
      // 触发事件总线上的"greet"事件
      this.$emit('greet', '你好，我是父组件！');
    },
    onGreet(message) {
      // 监听事件总线上的"greet"事件
      this.message = message;
    },
  },
};
</script>

// 子组件
<template>
  <div>
    <p>子组件收到的消息：{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    greet() {
      // 触发事件总线上的"greet"事件
      this.$emit('greet', '你好，我是子组件！');
    },
  },
};
</script>