Vue事件车，非父子组件通讯$bus,$event,中央事件总线

// 建立公共的js文件（事件车），主要用来传递信息
// 引入vue.js
import Vue from 'vue';
// 创建空的vue实例
var event = new Vue();

export default event;

<template>
  <div id="home">
    <h2>这是首页</h2>
    <h3>{{list}}</h3>
    <h5>{{mymsg}}</h5>

    <button @click="biu">发射</button>
  </div>
</template>
<script>
// 在需要传递信息的地方引入
import bus from '../eventBus.js'
export default{
  data(){
    return{
      list:['少欲音','正太音','大叔音'],
      mymsg:''
    }
  },
  methods: {
    biu(){
      // 发射一个自定义事件，用来传递信息
      console.log(bus);
      bus.$emit('biulist',this.list)
    }
  },
  mounted() {// 组件挂载时触发的钩子函数
    // 接收信息
    bus.$on('msg',val =>{
      this.mymsg = val
    })
  },
}
</script>

<template>
  <div id="product">
    <h2>这是商品页</h2>
    <ul v-for="val in item">
      <li>{{val}}</li>
    </ul>

    <button @click="fn">点击发射</button>
  </div>
</template>

<script>
// 在需要传递数据的地方引入
import bus from '../eventBus.js'
export default{
  data() {
    return {
       item:null
    }
  },
  methods: {
    fn(){
       bus.$emit('msg','这是商品页传来的数据')
    }
  },
  mounted() {
    // 接收信息
    bus.$on('biulist',val =>{
      this.item = val
    })
  },
  
}
</script>

Vue.prototype.$bus=new Vue();

 methods: {
    msg() {
      //$emit发送数据携带数据
      this.$bus.$emit("A", {
        name: "张三",
        age: 20
      });
    }
}

mounted() {
//$on监听接收数据，这里注意一般写在mounted，计算属性里
    this.$bus.$on("A", function(res) {
      console.log(res);
    });
  }