同級互傳用第三方量 var bus=new Vue();
<div class="box">
<one></one>
<two></two>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
var bas=new Vue()
Vue.component("one",{
template:`
<div>
<p>我是老大</p>
<button @click="add">點擊</button>
</div>
`,
data:function(){
return{
msg:"你是誰"
}
},
methods:{
add:function(){
bas.$emit("btn",this.msg)
}
}
})
Vue.component("two",{
template:`
<div>
<p>我是老二</p>
<a href="#">{{mess}}</a>
</div>
`,
data:function(){
return{
mess:""
}
},
mounted:function(){
bas.$on("btn",mmm=>{
this.mess=mmm
})
}
})
new Vue({
el:".box"
})
</script>
生命周期
生命周期中有鉤子函數(shù)（即生命過程）
1）beforeCreate未建立 2）create 已建立 3）beforeMount未加載數(shù)據(jù) 4）mounted已加載數(shù)據(jù) 5）beforeupdated未更新 6）updated更新
7）beforeDestroy未銷毀 8）destroy已銷毀
<div class="box">
<p>{{msg}}</p>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello vue"
},
beforeCreate:function(){
alert("beforecreate")
},
created:function(){
alert("created")
},
beforeMount:function(){
alert("beforemount")
},
mounted:function(){
alert("mounted")
}
})
</script>
