1、首先建立一个bus.js
2、在bus.js里面填上如下信息
import Vue from 'vue'
const bus = new VUe()
export default bus
3、在需要通信的组件中引入bus.js
import Bus from './bus.js'
4、组件通信
<template>
</template>
import Bus from './bus.js'
export default {
data() {
return {
message: ''"
}
},
methods: {
bus () {
Bus.$emit('msg', '我要传给兄弟组件们,你收到没有')
}
}
}
5、打开要和$emit通信的另外一个组件 添加
<template>
<div id="on">
<p>{{message}}</p>
</div>
</template>
import Bus from './bus.js'
export default {
data() {
return {
message: ''
}
},
mounted() {
let self = this
Bus.$on('msg', (e) => {
self.message = e
console.log(`传来的数据是:${e}`)
})
}
}