使用Bus.js进行组件通信

新建Bus.js文件

import Vue from 'vue'

const bus = new Vue();

export default bus

在需要通信的组件中引入bus.js

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

传值组件

通过$emit发送一个msg事件，传的参数是>>>"我要传给兄弟组件们，你收到没有"

<template>
</template> 
 
import Bus from '@/utils/bus.js';
export default { 
    data() {
        return {
            message: ''"
        }
     },
　　methods: {
       bus () {
          Bus.$emit('msg', '我要传给兄弟组件们，你收到没有')
       }
    }

接收组件

通过$on接受msg事件 e就是传过来的参数

<template>
    <div id="on">
            <p>{{message}}</p>
    </div>
</template>
 
import Bus from '@/utils/bus.js';
export default {
    data() {
      return {
        message:  ''
      }
    },
    mounted() {
　　　　let self = this
       Bus.$on('msg', (e) => {
         self.message = e
　　　　　console.log(`传来的数据是：${e}`)
       })
     }