EventBus组件通信 vue 两个无关的组件间通讯

EventBus相当于系在两个组件的桥梁，两个页面通过EventBus进行传递参数，调用方法。

示例： A页面调用B页面的方法

第一步：建立EventBus文件

在src下建立utils文件夹，utils文件夹下创立EventBus.js

 import Vue from 'vue';
 /**
  * 事件总线
  * @usage:
  * EventBus.$emit('event',payload);
  * EventBus.$on('on',(payload)=>{});
  */
 const EventBus = new Vue();
 export default EventBus

第二步：A文件（两个页面都要引用EventBus文件）：

<template>
	<div>
		<div class="button" @click="toBpage">点击向B页面传递参数</div>
	</div>
</template>
<script>
    import Bus from "@/utils/EventBus";
    export default {
      data() {
        return {
	      id:'12345' //a向b传递的参数
	    }
	  },
	  methods:{
	  	toBpage(){
	  	  // getId 是自己命名的b页面也通过同一个名字接受参数，this.id 是参数
      	   Bus.$emit("getId", this.id);
        }
	  }
     }
</script>

第三步：B文件（两个页面都要引用EventBus文件）：

<script>
    import EventBus from "@/utils/EventBus";
    export default {
      data() {
        return {
	      aId:'' 
	    }
	  },
	  mounted(){
	  // 获取a传过来的id
  	    EventBus.$on("getId", (id) => {
	      //a传来的参数
	      console.log(id,'----id')
	      this.aId = id  //可以赋值
	      this.getList(id) // 可以做其他操作
	    });
	  }
	  methods:{
	  	getList(id){
	  	  // 获取数据
        }
	  }
     }
</script>