上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<green></green>
<red></red>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let eventBus=new Vue;
//定义两个兄弟组件
let green={
data(){
return {
color:'绿色',
};
},
created(){
//在created阶段,已经在绿色组件里面已经订阅了changeR事件了,点击变红的时候,在红色的那个组件里面触发发布执行
eventBus.$on('changeR',this.changeRed);
},
methods:{
changeRed(){
this.color='红色';
},
fn(){
eventBus.$emit('changeG');
},
},
template:'<div>{{color}}<button @click="fn">变绿</button></div>'
};
let red={
data(){
return {
color:'红色'
}
},
created(){
//在红色的组件中订阅,改变红色组件里面的初始颜色红色,在绿色的组件中点击(点击的时候发布eventBus.$emit())让它变成绿色
eventBus.$on('changeG',this.changeGreen);
},
methods:{
changeGreen(){
//在created阶段,已经把methods,data等挂载到实例上去了,所以在created可以调用
this.color='绿色'
},
fn(){
eventBus.$emit('changeR')
},
},
template:'<div>{{color}}<button @click="fn">变红</button></div>'
};
let vm = new Vue({
el: '#app',
data: {},
components:{
green,
red,
}
});
</script>
</body>
</html>
上图(初始场景)
点击以后(点击后的场景)
点击后最终的样子