Vue.js 教程：Vue.js 组件间通信 - 非父子组件间通信（EventBus 总线）

Vue.js 是一款流行的 JavaScript 框架，它可以帮助开发人员快速构建交互式的 Web 应用程序。在 Vue.js 中，组件是构建应用程序的基本单元，而组件之间的通信是非常重要的。

在 Vue.js 中，组件之间的通信分为两种类型：父子组件间通信和非父子组件间通信。本文将讨论非父子组件间通信，并介绍如何使用 EventBus 总线实现组件间通信。

什么是 EventBus 总线？

EventBus 总线是一种用于在 Vue.js 应用程序中实现非父子组件间通信的机制。它基于发布/订阅模式，允许组件在不直接相互通信的情况下进行通信。EventBus 总线通常是在 Vue.js 应用程序的根组件中创建的。

如何使用 EventBus 总线？

使用 EventBus 总线需要遵循以下步骤：

1. 在 Vue.js 应用程序的根组件中创建 EventBus 总线：

import Vue from 'vue';
export const EventBus = new Vue();

1. 在发送组件中使用 EventBus 总线：

import { EventBus } from './EventBus.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello, world!');
    }
  }
}

1. 在接收组件中使用 EventBus 总线：

import { EventBus } from './EventBus.js';
export default {
  created() {
    EventBus.$on('message', message => {
      console.log(message); // 输出：Hello, world!
    });
  }
}

EventBus 总线示例代码

以下示例代码演示了如何在 Vue.js 应用程序中使用 EventBus 总线实现非父子组件间通信：

// javascriptcn.com 代码示例
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// Sender.vue
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello, world!');
    }
  }
}
</script>

// Receiver.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    EventBus.$on('message', message => {
      this.message = message;
    });
  }
}
</script>

在上面的示例代码中，我们首先在 EventBus.js 文件中创建了 EventBus 总线。然后，在 Sender.vue 组件中，我们使用 EventBus 总线发送了一条消息。最后，在 Receiver.vue 组件中，我们使用 EventBus 总线接收了这条消息，并将其显示在页面上。

总结

非父子组件间通信是 Vue.js 应用程序中非常重要的一部分。EventBus 总线是一种用于实现非父子组件间通信的机制，它基于发布/订阅模式，允许组件在不直接相互通信的情况下进行通信。在使用 EventBus 总线时，我们需要在 Vue.js 应用程序的根组件中创建 EventBus 总线，并在发送组件中使用 $emit 方法发送消息，在接收组件中使用 $on 方法接收消息。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657eca7ad2f5e1655d9a87bb