eventBus是vue事件总线，所有的组件都可以将自定义事件发布到事件总线，然后在我们所需要的组件中订阅他
1.首先创建一个eventBus.js
import Vue from 'vue'
// 全局事件总线
const eventBus = new Vue()

export default eventBus

2.在main.js全局引入
import eventBus from "。。。。。。/eventBus";
Vue.prototype.$eventBus = eventBus;

3.组件A中发出事件  $emit
this.$eventBus.$emit("aaa",1)

4.组件B中订阅它  $on
this.$eventBus.$on("aaa",res=>{
})

移除事件  $off
this.$eventBus.$off("aaa")

对于前端
的我们而言，并非是只有写界面才是最大的问题，很多的情况下，我们需要关注的是数据，比如js页面的数据传递等等，学习vue我们也是需要知道怎么去使用数据


当然，使用存储也是可以得，但是并非一定要缓存，当然在vue中有推荐了我们去使用vuex去数据交互，Vuex会让你的Vue代码足够灵活可控，把数据统一存入state, 只允许通过Actions触发Mutations修改。然而，有时候我们的项目并没有复杂到需要用上Vuex。，（我们也不讨论已经废除的vm.$dispatch）很多情况下我们都是需要一个事件的捕获，这时候我们就可以用到vue的eventbus了
受用eventbus的方法很是简单，我们需要做三步事情，第一步，我们需要创造一个容器去充当我们的eventbus
第二步，我们需要去抛出，或者说提交我们的事件
第三步，我们去监听我们的那个事件（也许这才是第二部）
首先，我们需要在全局定义我们的eventbus



这里我们定义到了eventbus。这就简单的完成了我们的第一步，当然，全局变量，我想你应该知道定义在哪儿的
接着我们先去抛出这个事件，使用￥。emit去“提交”

怎样，这点都可以理解吧，其次我们经行第三步，去监听

当然。这里已经监听好的。点击事件俺只是个累赘，
接下来我们就要去界面中使用它们了


首先，倒入我们所需要的文件：




这里我使用的是谈transimissionone还有transimissiontwo两个文件‘


接着是定义

其次是使用

最后运行我们的项目，查看下效果

这边主要是交大家使用，所以代码就俘虏在下面，主要是四个文件
transimissionone。vue（发送事件的文件）
<template>
	<div class="transimission1">
	<button @click="get">点击发送数值到eventbus中</button>	
	</div>
	
</template>

<script>
	export default {
		name: "transimission1",
		methods: {
			get: function() {
				console.log("Aaa");
				eventBus.$emit('eventBusName', "hellokugou");
			}
		},
	}
</script>

<style>

</style>


其次是transimissiontwo（监听者）
<template>
	<div class="transimissiontwo">
		<button @click="method1">点击console.log出eventbus的信息
</button>
	</div>
</template>

<script>
	export default {
		name: "transimissiontwo",
		methods: {
			method1: function() {
				//使用on老监听事件
				eventBus.$on('eventBusName', function(val) {　
					console.log("这个是用transimissiontwo的val值为："+val)
				})
			}
		}
	}
</script>
<style>

</style>


接着是我们的中枢。app。vue中使用
<template>
	<div id="app">
		<click></click>
	<transimissiontwo></transimissiontwo>
		<transimissionone></transimissionone>
	<sendparent @listenertochildevent="getmessagefromchild"></sendparent>
		<value :locallogo="netlogo"></value>
		<!--无法监听，说明要在那个组件中-->
		<button @listenertochildevent="getmessagefromchild">测试能否监听</button>
		<my_plug_in></my_plug_in>
		<div class="choose_div">
			<ul>

				<li>
					<router-link to="/foo">foo页面</router-link>
				</li>
				<li>
					<router-link to="/header">header页面</router-link>
				</li>
				<li>
					<router-link to="/hello">hello页面</router-link>
				</li>
				<li style="clear: both;list-style: none;"></li>
			</ul>

		</div>

		<div class="main">
			<router-view class="my_router_iew"></router-view>
		</div>
		<testmintui></testmintui>
	</div>
</template>

<script>
	import value from './components/value'
	import click from "./components/click"
	import my_plug_in from "./components/plug_in"
	import sendparent from "./components/send_parent"
	import testmintui from "./components/Test_mint-ui"
	import transimissiontwo from "./components/transimissiontwo"
	import transimissionone from "./components/transimissionone"

	export default {
		name: 'app',
		data() {
			return {
				netlogo: "主页显示信息到组件中"
			}
		},
		components: {
			value,
			click,
			my_plug_in,
			sendparent,
			testmintui,
			transimissionone,
		transimissiontwo,
		
		},
		methods: {
			getmessagefromchild: function(data) {
				console.log(data);
			}
		}
	}
</script>

<style>
	body {
		background-color: #f8f8ff;
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		color: #2c3e50;
	}
	
	ul {
		width: 12rem;
	}
	
	ul li {
		list-style: none;
	}
	
	ul li:not(:last-child) {
		list-style: none;
		width: 2rem;
		margin-left: 0.1rem;
		margin-right: 0.1rem;
		float: left;
		text-align: center;
		background: #2C3E50;
		color: white;
	}
	
	ul li a {
		text-decoration: none;
		font-size: 16px;
		color: white;
		line-height: 1rem;
		text-align: center;
	}
	
	ul li:nth-child {
		list-style: none;
		clear: both;
	}
	
	.choose_div {
		width: 100%;
		overflow: scroll;
	}
</style>
请无视掉没用的代码。接着就是定义eventbus了
window.eventBus = new Vue();
就这样，很是简单，当然，对于级别的可以使用prop，下回再讲

      在vue项目中，父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯，就会比较麻烦。这时，使用eventBus通讯，就可以很便捷的解决这个问题。

      eventBus可以在全局定义，实现全项目通讯，使用方法也很简单。

1、初始化——全局定义

      全局定义，可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.

//main.js
//方式一
Vue.prototype.$EventBus = new Vue();
//方式二
window.eventBus = new Vue();

2、触发事件

//使用方式一定义时
this.$EventBus.$emit('eventName', param1,param2,...)
//使用方式二定义时
EventBus.$emit('eventName', param1,param2,...)


3、监听事件

//使用方式一定义时
this.$EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})
//使用方式二定义时
EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})

4、移除监听事件

      为了避免在监听时，事件被反复触发，通常需要在页面销毁时移除事件监听。或者在开发过程中，由于热更新，事件可能会被多次绑定监听，这时也需要移除事件监听。

//使用方式一定义时
this.$EventBus.$off('eventName');
//使用方式二定义时
EventBus.$off('eventName');

 

eventBus.js
//新建eventBus实例
import Vue from 'vue'
export default new Vue()


router.js
//meta传递name名
{
      path: '/version/defDetail',
      name: 'VersionDefDetail',
      meta:{
        name:'标签1',
      },
//全局路由守卫
router.beforeEach((to, from, next) => {
      eventBus.$emit('addTab',{title:to.meta.name,names:to.name,path:to.path,query: Object.keys(to.query).length?to.query:'',params:Object.keys(to.params).length?to.params:''})
  
  next();
}, function (result) {

});

App.vue
//标签页
  <tabs-com></tabs-com>
//组件要加key 如果不加，路由相同，参数不同时 ，不会刷新页面
        <router-view :key="key" ref="routerView"/>
//计算属性做处理
 computed:{
        key(){
            return this.$route.path + Math.random();
        }
    },

组件页 tabsCom.vue
<template>
//如果有数据展示，没有就不展示
  <div class="tabs" v-if="editableTabs.length">
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click='clickTab' class="tabbox">
            <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
            >
            </el-tab-pane>
        </el-tabs>
  </div>
</template>

<script>
//引入eventBus
import eventBus from '../evenBus'

export default {
  name: 'tabs',
  props: { 
  },
  mounted(){

//第一次eventBus是挂载不上的，路由全局守卫要比组件先运行，所以第一次要先调用
//一下 this.addTab()

      this.addTab()
//设置eventbus

       eventBus.$on('addTab',(targetName)=>{
           let isadd=true
            this.editableTabs.forEach(item=>{
                console.log(item.query,targetName.query)
 //如果之前添加过了，参数也一样，就不添加   
            if(item.path===targetName.path&&JSON.stringify(item.query)==JSON.stringify(targetName.query)){

                    isadd=false
//光标归位

                    this.editableTabsValue=item.name
                }
            })

           if(!isadd) return
//添加数据

          let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                title: targetName.title,
                name:newTabName,
                names:targetName.names,
                path: targetName.path,
                query:targetName.query,
                params:targetName.params
                });
                this.editableTabsValue = newTabName;
       })
  },
  data() {
      return {
        editableTabsValue: '2',
        editableTabs: [],
        tabIndex: 2
        }
    },
  methods: {
      addTab(){
          console.log(this.$route,'dsaddadsa')
          let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                title: this.$route.meta.name,
                name:newTabName,
                names:this.$route.name,
                path: this.$route.path,
                query:Object.keys( this.$route.query).length?to.query:'',
                params:Object.keys( this.$route.params).length?to.params:''
                });
                this.editableTabsValue = newTabName;
       },
      removeTab(targetName) {
         let tabs = this.editableTabs;
        let activeName = this.editableTabsValue ;
        let active=JSON.parse(JSON.stringify(this.editableTabsValue))
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue =activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
//如果删除的标签是自己，则跳转到最后一个标签
        if(this.editableTabs.length&&active === targetName){
           this.$router.push({path:this.editableTabs[this.editableTabs.length-1].path,query:this.editableTabs[this.editableTabs.length-1]})
         }
    },
//点击跳转路由

    clickTab(tab,target){

//这边可以加判断，如果params有值  可以按params传参来传 
          this.$router.push({path:this.editableTabs[tab.index].path,query:this.editableTabs[tab.index].query})
            console.log(this.editableTabs[tab.index].path)
    }
  }
}
</script>

<style lang='scss' scoped>
.tabs{
    z-index: 100;
    position: relative;
    width: 100%;
     background: white;
     height: 36px;
     margin-bottom: 16px;
     margin:-16px -16px 16px ;
    //  overflow: hidden;
    .tabbox{
        position: absolute; 
        left: 0;
        top:0;
    }
}
</style>