<div id="app">
<boy></boy>
<girl></girl>
</div>
<script src="js/vue.js"></script>
<script>
var kfc = new Vue();
Vue.component("boy",{
template:`
<div>
<h1>我是传出的</h1>
<button @click="sendmsg">发送数据传</button>
</div>
`,
data:function(){
return{
msg:"我是boy组件,要传给girl"
}
},
methods:{
sendmsg:function(ssw){
kfc.$emit("send",this.msg)
}
}
});
Vue.component("girl",{
template:`
<div>
<h1>我是接收的</h1>
<a href="">{{mess}}</a>
</div>
`,
data:function(){
return{
mess:""
}
},
mounted:function(){
kfc.$on("send",msg=>{
this.mess = msg
})
}
});
new Vue({
el:"#app"
});
</script>
网友评论