bus
main.js
import Vue from 'vue'
const bus = new Vue()
export default bus
一、传值
发送信息
import bus from '@/main/bus'
第一个参数为标志变量,第二个参数为通信的值
bus.$emit('message', 'hello')
接收信息
import bus from '@/main/bus'
第一个参数为标志变量,第二个参数中的e为通信的值
methods: {
test(e) {
console.log(e)
}
}
mounted() {
bus.$on('message', this.test)
}
销毁
boforeDestroy() {
bus.$off('message', this.test)
}
二、调用方法
一个组件(A)调用另一个组件(B)的方法
B组件的方法
import bus from '@/main/bus'
mounted () {
bus.$on('testA', this.testA)
},
methods: {
testA () {
console.log('由A组件调用')
}
}
A组件调用
import bus from '@/utils/bus'
mounted () {
bus.$emit('testA')
}
销毁
boforeDestroy() {
bus.$off('testA', this.testA)
}