直接贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.js"></script>
<script>
window.onload = function () {
let Bus = new Vue();
let A = {
template:"#myA",
data(){
return{
name:"aaaa"
}
},
methods:{
send(){
Bus.$emit("data-a",this.name)
}
}
};
let B = {
template:"#myB",
data(){
return{
name:"bbbb"
}
},
methods:{
send(){
Bus.$emit("data-b",this.name)
}
}
};
let C = {
template:"#myC",
data(){
return{
name:"",
nameA:"",
nameB:"",
}
},
mounted() {
Bus.$on("data-a",function (name) {
//不能实现的原因：这里的this是Vue
this.name = name;
});
Bus.$on("data-a",name =>{
this.nameA = name
});
Bus.$on("data-b",name =>{
this.nameB = name
})
}
}
new Vue({
el:"#app",
components:{
"my-a":A,
"my-b":B,
"my-c":C
}
})
}
</script>
<template id="myA">
<div>
<h3>组件A{{name}}</h3>
<button @click="send">数据发送给C</button>
</div>
</template>
<template id="myB">
<div>
<h3>组件B{{name}}</h3>
<button @click="send">数据发送给C</button>
</div>
</template>
<template id="myC">
<div>
<h3>组件C接收的内容{{nameA}},{{nameB}}</h3>
</div>
</template>
</head>
<body>
<div id="app">
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div>
</body>
</html>
实现的效果：
