Vue使用bus总线进行组件通信

新建bus.js文件

在utils文件夹下新建bus.js文件

import Vue from 'vue'
const bus = new Vue()
export default bus 

组件间传值

先在两个需要通信的组件中引用bus.js

import bus from '@/utils/bus'

发送消息

//第一个参数为标志变量，第二个参数为通信的值

bus.$emit('message', 'hello');

接收消息

//第一个参数为标志变量，第二个参数中的e为通信的值

bus.$on('message', (e) => {
    console.log(e)
})

组件间调用方法

例：组件A调用组件B的方法

组件A、组件B中引用bus.js

import bus from '@/utils/bus'

组件B定义一个方法

mounted () {    
  bus.$on('test', this.test)  
},
test () {
  console.log('组件B的方法')
},

组件A调用方法

mounted () {
  bus.$emit('test')
},