在此之前先了解以下：
$on(eventName) 监听事件
$emit(eventName) 触发事件
如果把Vue看成一个家庭（相当于一个单独的components)，女主人一直在家里指派($ emit)男人做事，而男人则一直监听($ on)着女士的指派($ emit)里eventName所触发的事件消息，一旦$ emit 事件一触发，$on 则监听到 $emit 所派发的事件，派发出的命令和执行派执命令所要做的事都是一一对应的。
通过声明第三方事件车解决兄弟组件间传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<!-- 6.引入子组件aa -->
<aa></aa>
<!-- 7.引入子组件bb -->
<bb></bb>
</div>
<!-- 4.子组件aa的标签样式 -->
<template id="aaa">
<!-- 设置点击事件触发子组件aa内fn方法 作用：通过eventBus事件车发射一个事件 -->
<div @click="fn"> {{a}}</div>
</template>
<!-- 5.子组件bb的标签样式 -->
<template id="bbb">
<div> {{b}} </div>
</template>
<script>
//0.在外部声明一个Vue事件车在事件车内使用发射事件$emit函数与$on监控函数
let eventBus = new Vue();
//1.定义子组件aa
let aa = {
template:'#aaa',
data(){
return {
a:'我是aaa的数据'
}
},
methods:{ //定义方法函数
fn(){ //通过事件车发射出一个fnb事件 并带上参数a
//在外面声明的事件车eventBus可以用其在此发射事件，同时在其他兄弟组件就能用其的$on方法监听 这样就实现了兄弟组件的通信
eventBus.$emit('fnb',this.a)
//兄弟组件的this并不是同一个this所以不能用以下方式发射事件
//this.$emit('fnb',this.a) 由于this发射的是自身函数所以只能被自身this.$on监听
}
}
}
//2.定义子组件bb
let bb = {
template:'#bbb',
data(){
return {
b:'我是bbb的数据'
}
},
created(){ //在created生命周期函数时就设置一个监听事件$on
eventBus.$on('fnb',(msg)=>{ //先订阅好fnb事件 $on监听此事件 触发后执行回调函数
this.b = msg; //将本身数据替换成兄弟组件传过来的数据
console.log('bb子主件内的b数据已被兄弟组件更改成'+msg)
});
},
}
let vm = new Vue({
el:'#app',
components:{ //3.在根主件注册两个子组件
aa,
bb
}
})
</script>
</body>
</html>
运行结果如下：
没点击前：
点击后：
