跨页面之间的传值EventBus

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁。通过一个空的vue实例作为事件中心，可以用来触发和监听事件。

 全局使用

在main.js初始化

Vue.prototype.$Bus = new Vue()

 局部使用

创建一个bus.js

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

在要使用的页面引入bus.js

import Bus from '@/utils/bus.js';

A页面发起通信

<template>
    <button @click="sendMessage()">-</button>
</template>
 
<script> 
export default {
  methods: {
    sendMessage() {
      Bus.$emit("message", '我是发送的消息');
    }
  }
}; 
</script>

B页面接受消息

<template>
  <p>{{msg}}</p>
</template>
 
<script> 
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    Bus.$on("message", (val) => {
      // A页面发送来的消息
      this.msg = val;
    });
   },
   destroyed() {
	  Bus.$off('message');
   },
};
</script>

防止$on多次触发，需要用到$off进行销毁。