如果两个组件不是父子关系，那么传递信息就不能通过props了。
此时可以使用vue的事件总线来传递信息。
1.创建非父子组件都能访问的事件总线（也就是空的vue实例）
1.创建一个EventBus.js
2.引入vue并且创建一个vue实例
import Vue from 'vue'
const Bus = new Vue()
3.将Bus导出
export default Bus2.在发送消息的组件中对事件总线发送事件
1.先要将Bus导入该组件
import Bus from '../utils/EventBus'
2.在methods中写入发送消息
methods: {
sendMsgFn() {
Bus.$emit('sendMsg', '今天天气不错，适合旅游')
},
},3.在接受消息的组件中对发送消息的事件进行监听并给出回调方法
1.先要将Bus导入该组件
import Bus from '../utils/EventBus'2.一般在页面刚创建完就立即监听事件，所以在生命周期钩子函数created（）中写入绑定。
created() {
Bus.$on('sendMsg', (msg) => {
this.msg = msg
})
},此时执行sendMsgFn()方法就可以成功传递消息了。
注意，消息发送是一对多的关系，可以有多个组件对事件进行监听。
该方法适用于比较简单的交互场景，复杂场景难以维护，建议使用vuex。
下面给出源码。
App.vue
<template>
<div class="app">
<BaseA></BaseA>
<BaseB></BaseB>
<BaseC></BaseC>
</div>
</template>
<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'
import BaseC from './components/BaseC.vue'
export default {
components:{
BaseA,
BaseB,
BaseC
}
}
</script>
<style>
</style>components
BaseA.vue
<template>
<div class="base-a">
我是A组件（接受方）
<p>{{msg}}</p>
</div>
</template>
<script>
import Bus from '../utils/EventBus'
export default {
data() {
return {
msg: '',
}
},
created() {
Bus.$on('sendMsg', (msg) => {
// console.log(msg)
this.msg = msg
})
},
}
</script>
<style scoped>
.base-a {
width: 200px;
height: 200px;
border: 3px solid #000;
border-radius: 3px;
margin: 10px;
}
</style>BaseB.vue
<template>
<div class="base-b">
<div>我是B组件（发布方）</div>
<button @click="sendMsgFn">发送消息</button>
</div>
</template>
<script>
import Bus from '../utils/EventBus'
export default {
methods: {
sendMsgFn() {
Bus.$emit('sendMsg', '今天天气不错，适合旅游')
},
},
}
</script>
<style scoped>
.base-b {
width: 200px;
height: 200px;
border: 3px solid #000;
border-radius: 3px;
margin: 10px;
}
</style>BaseC.vue
<template>
<div class="base-c">
我是C组件（接受方）
<p>{{msg}}</p>
</div>
</template>
<script>
import Bus from '../utils/EventBus'
export default {
data() {
return {
msg: '',
}
},
created() {
Bus.$on('sendMsg', (msg) => {
// console.log(msg)
this.msg = msg
})
},
}
</script>
<style scoped>
.base-c {
width: 200px;
height: 200px;
border: 3px solid #000;
border-radius: 3px;
margin: 10px;
}
</style>utils
EventBus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus效果图：
1.发送前
