vue 事件总线简单介绍

EventBus的简介

　　EventBus又称为事件总线。在vue中用来组件之间传递数据。

如何使用EventBus

　　1、初始化

　　首先需要创建一个eventBus.js文件。并将其导出。以便其他模块使用或者监听它。

　　

// eventBus.js

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

　　2.注册事件

　　假设 A组件需要向B组件传递消息。只需要在A组件中注册一个事件。在B组件监听A组件注册的事件。

　　

<!-- A.vue -->

<template>
    <button @click="send()">A--->B</button>
</template>

<script> 
import { eventBus } from "../eventBus.js"; 　　　　//导入eventBus.js文件

export default { 
methods: {
 send() {
 　　　　　　eventBus.$emit("sendMsg", '我是A组件'); //注册一个 sendMsg 事件
　　　　} 
　　} 
}; 

</script>

3.监听事件

接下来，我们需要在 B页面 中接收这则消息。

<!--B.vue -->


<template>
  <div>{{msg}}</div>
</template>

<script> 
import { eventBus } from "../eventBus.js";　　//导入eventBus.js文件
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    eventBus.$on("sendMsg", (msg) => { // A发送来的消息 this.msg = msg; }); 　　// 监听 sendMsg 事件
　　} 
}; 

</script>