Vue.js 中通过 $emit 和 $on 实现非父子组件之间通信的方法

在 Vue.js 中，组件之间的通信是很重要的一部分。虽然父组件和子组件之间的通信很容易实现，但是在非父子组件之间，通信却比较困难。这时候就可以使用 Vue.js 提供的 $emit 和 $on 方法实现非父子组件之间的通信。

$emit

$emit 是 Vue.js 提供的一个方法，可以用于在组件之间发射事件。通过 $emit 发射事件，其他组件就可以监听到这个事件并进行相应处理。$emit 方法接收两个参数，第一个参数表示事件名，第二个参数表示传递的数据。

this.$emit('myEvent', data);

$on

$on 是 Vue.js 提供的另一个方法，可以用于监听组件发射的事件。当组件发射指定的事件时，$on 方法就会触发回调函数。$on 方法接收两个参数，第一个参数表示事件名，第二个参数表示回调函数。

this.$on('myEvent', function(data) {
  // 处理接收到的数据
});

示例代码

现在来看一个示例代码，下面的示例代码中包含了两个非父子组件：A 和 B。A 组件中包含了一个按钮，点击按钮会发射一个事件，并且会传递一个数据。B 组件中监听了这个事件，并且会在控制台输出接收到的数据。

在 A 组件中使用 $emit 发射事件：

methods: {
  handleClick() {
    this.$emit('myEvent', 'Hello, Vue.js!');
  }
}

在 B 组件中使用 $on 监听事件：

mounted() {
  this.$on('myEvent', function(data) {
    console.log(data);
  });
}

当点击 A 组件中的按钮时，B 组件的控制台会输出 "Hello, Vue.js!"。

总结

通过以上的示例代码，我们可以看到，$emit 和 $on 方法可以很方便地实现非父子组件之间的通信。在实际应用中，非父子组件之间的通信是很常见的情况，学会使用 $emit 和 $on 方法对于提高 Vue.js 应用的可维护性和可拓展性是非常有帮助的。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654e33737d4982a6eb77623b