视图如下:
单击点击后:
下列为实现代码:
html:
<dvi id="app">
<brother></brother>
<hr>
<sbrother></sbrother>
</dvi>
<template id="brother">
<div>
哥哥
{{ msg }}
<button @click="gchan">点击</button>
</div>
</template>
<template id="sbrother">
<div>
弟弟
{{ msg }}
{{ change() }}
</div>
</template>
js:
//创建一个空的Vue用于存放数据
let bus=new Vue({});
Vue.component("brother",{
template:"#brother",
data(){
return{
msg:"我是你哥哥"
}
},
created:{
},
methods:{
gchan(){
//将数据放入bus
bus.$emit("tass",this.msg)
}
}
});
Vue.component("sbrother",{
template:"#sbrother",
data(){
return{
msg:"我是你弟弟"
}
},
mounted:{
},
methods:{
change(){
//监听bus,发生变化的时候,改变msg。
bus.$on("tass",(val)=>{
this.msg=val;
})
}
}
});
new Vue({
el:"#app"
})