Vue非父子组件之间的通信

// 注册一个空的js,作为中转站

bus.js

import Vue from 'vue'
export default new Vue()

A组件：

 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，
 作为中间仓库来传值，不然路由组件之间达不到传值的效果。

$emit发送事件

<template>
  <div @click="eleValue">点击向非父子组件传值</div>
</template>

<script>
// 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，
// 作为中间仓库来传值，不然路由组件之间达不到传值的效果。

// 引入中转站
import Bus from './common/bus.js'
export default {
  name: "",
  data() {
    return {
       elementVa:'这是要传的值'
    };
  },
  
  methods: {
   eleValue(){ 
    //  $emit 发送事件
     Bus.$emit('value',this.elementVa)
     this.$router.push({
       path:'/acom'
     })
   }
  },
  computed:{
    
  },
  mounted(){
  }
};
</script>

<style scoped>
</style>

B组件： 

我们可以这样操作。也是需要 先引入那个‘中转站’eventBus.然后接收事件。
 注意此操作是在mounted(){}这个生命周期里进行的。

$on监听 接受传过来的值

<template>
  <div>接受传过来的值：{{sendVlaue}}</div>
</template>

<script>
// 引入中转站
import Bus from "./common/bus.js";
export default {
  name: "",
  data() {
    return {
      sendVlaue: ""
    };
  },
//   我们可以这样操作。也是需要 先引入那个‘中转站’eventBus.然后接收事件。
// 注意此操作是在mounted(){}这个生命周期里进行的。
  mounted() {
    let _this = this;
    // $on 监听，接受传过来的值
    Bus.$on("value", data => {
      console.log(data);
      _this.sendVlaue = data;
      console.log(_this.sendVlaue);  //接受传过来的值
    });
  }
};
</script>

<style scoped>
</style>