<div class="box">
<first></first>
<second></second>
</div>
<script src="js/vue.js"></script>
<script>
var sent = new Vue()//中间量
Vue.component("first",{
template:`
<div>
<h1>这是first组件</h1>
<button @click='add'>传送数据</button>
</div>
`,
data:function(){
return{
msg:'hello vue'
}
},
methods:{
add:function(){
sent.$emit("sentMsg",this.msg)
}
}
})
Vue.component("second",{
template:`
<div>
<h1>这是second组件</h1>
<p>{{mess}}</p>
</div>
`,
data:function(){
return{
mess:''
}
},
mounted:function(){//因为mounted是vue的生命周期，所以用箭头函数用this指向组件
sent.$on("sentMsg",msg=>{
this.mess = msg
})
}
})
new Vue({
el:'.box'
})
</script>
QQ图片20180925082307.png
