在 Vue 中，组件之间的通信是一个重要的话题。有时候需要把数据从一个组件传递到另一个组件，或者调用其他组件的方法。Vue 提供了多种方式来实现组件间的通信，其中包括事件总线。

什么是事件总线？

事件总线是一个中央事件管理器，用于在不同的组件之间传递消息。Vue 本身并没有提供官方的事件总线实现，但我们可以使用一个简单的 Vue 实例作为事件总线。我们可以在任何组件中通过 $emit 发送事件，然后在其他组件中通过 $on 监听和处理这些事件。

Vue 中的事件总线使用步骤

步骤1：创建事件总线

在一个单独的文件中创建一个 Vue 实例，作为事件总线：

// event-bus.js

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

步骤2：发送事件

在需要发送事件的组件中，通过 $emit 发送事件：

// Sender.vue

import { EventBus } from './event-bus.js'

export default {
  // ...
  methods: {
    sendData() {
      EventBus.$emit('eventName', this.data)
    }
  }
}

步骤3：接收事件

在需要接收事件的组件中，通过 $on 监听事件，并在回调函数中处理事件数据：

// Receiver.vue

import { EventBus } from './event-bus.js'

export default {
  // ...
  created() {
    EventBus.$on('eventName', data => {
      // 处理接收到的数据
    })
  }
}

使用 Axios 调用 GitHub 用户接口数据

Vue 脚手架中集成了 Axios，一个常用的 HTTP 请求库。我们可以使用 Axios 轻松地调用 GitHub 提供的用户接口数据信息。

步骤1：安装 Axios

在终端中运行以下命令来安装 Axios：

npm install axios

步骤2：导入 Axios

在需要使用 Axios 的组件中，导入 Axios，并进行相应的配置：

// UserComponent.vue

import axios from 'axios'

export default {
  // ...
  methods: {
    fetchData() {
      axios.get('https://api.github.com/users')
        .then(response => {
          // 处理接口响应数据
        })
        .catch(error => {
          // 处理请求错误
        })
    }
  }
}

步骤3：处理接口响应数据

在 then 回调函数中，我们可以处理接口返回的数据：

// UserComponent.vue

// ...

.then(response => {
  const users = response.data
  // 处理用户数据
})

步骤4：处理请求错误

在 catch 回调函数中，我们可以处理请求出现的错误：

// UserComponent.vue

// ...

.catch(error => {
  console.error(error)
  // 处理错误
})

通过以上步骤，我们可以在 Vue 中使用事件总线方式进行组件间的数据传递，并使用 Axios 调用 GitHub 提供的用户接口数据信息。

希望本文对你有帮助，如有任何疑问，请随时留言。

本文来自极简博客，作者：夏日蝉鸣，转载请注明原文链接：Vue 中通过事件总线方式组件间传递数据及调用 GitHub 的用户接口数据信息