Vue EventBus自定义组件事件传递

Vue EventBus自定义组件事件传递可以让我们在Vue项目中进行组件间的数据传递，在实现一些特殊的功能时非常有用。下面是Vue EventBus自定义组件事件传递的完整攻略。

步骤一：创建EventBus

EventBus是一个全局的事件总线，用于在组件间传递数据。我们需要在Vue项目中创建一个新的js文件来实现EventBus。

import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;

步骤二：在组件中引入EventBus

在需要使用EventBus的组件中，我们需要引入刚刚创建的EventBus。

import EventBus from './EventBus';

步骤三：在发送数据的组件中，使用EventBus来发送数据

在需要发送数据的组件中，我们可以使用EventBus.$emit()方法来发送数据。这个方法接收两个参数，第一个参数是事件名，第二个参数是要传递的数据。

EventBus.$emit('eventName', eventData);

步骤四：在接收数据的组件中，使用EventBus来接收数据

在需要接收数据的组件中，我们可以使用EventBus.$on方法来注册事件监听器，当事件被触发时，我们可以在回调函数中处理数据。这个方法接收两个参数，第一个参数是事件名，第二个参数是事件触发后要执行的回调函数。

EventBus.$on('eventName', (data) => {
  // 处理传递过来的数据
});

示例一：父子组件传递数据

这个例子中，包含有一个父组件和一个子组件，我们需要在父组件中通过点击按钮来触发EventBus发送数据，然后在子组件中通过EventBus来接收数据。

在父组件中，我们需要在按钮点击事件中触发EventBus发送数据。

<button @click="sendMessage">Send Message</button>

methods: {
  sendMessage() {
    EventBus.$emit('message', 'Hello, World!');
  }
}

在子组件中，我们需要在created生命周期中使用EventBus.$on注册事件监听器来监听事件，并在回调函数中处理数据。

created() {
  EventBus.$on('message', (message) => {
    console.log(message); // 输出 Hello, World!
  });
}

示例二：非父子组件传递数据

这个例子中，包含有一个发出数据的组件和一个接收数据的组件，而且这两个组件并不是父子关系，它们的组件树互不相交。我们需要将数据从一个组件传递到另一个组件。

在发出数据的组件中，我们需要给某一个元素添加一个事件监听器来触发EventBus发送数据。

created() {
  this.$refs.button.addEventListener('click', () => {
    EventBus.$emit('message', 'Hello, World!');
  });
}

在接收数据的组件中，我们和之前一样，在created生命周期中使用EventBus.$on来注册事件监听器，监听由上述 “发出数据的组件” 发出的 "message" 事件，并处理数据。

created() {
  EventBus.$on('message', (message) => {
    console.log(message); // 输出 Hello, World!
  });
}

这就是使用Vue EventBus自定义组件事件传递的完整攻略，希望对你有所帮助。