需求
我在开发的时候遇到一个这样的问题，假设有一个页面 A.vue 和 B.vue
两个页面没有任何的关系
B.vue 上有一个 button, 当点击这个按钮的时候，需要让 A.vue 打印一点东西，如：console.log('xxx')

这我们就需要用到 vue 的组件通信了
我们需要一个中间件，把这两个页面连接起来，暂且叫它 channel 吧

// channel.js
import Vue from "vue";

export default new Vue();
// A.vue
<script>
    import channel from "./channel.js"
    export default {
        mounted() {
            channel.$on("btnClick", () => {
                console.log('xxx')
            });
        }
    }
</script>
// B.vue
<template>
  <div>
      <button @click="handleBtnClick" value="click"/>
  </div>
</template>

<script>
    import channel from "./channel.js"
    export default {
        methods: {
            handleBtnClick: function() {
      channel.$emit('btnClick') 
            }
        }
    }
<script>