09-生命周期及非父子组件间的通信
2018-10-26 本文已影响0人
乔乔_老师
一. Vue生命周期
lifecycle.png
二、生命周期代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
{{msg}}
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
beforeCreate:function(){
alert('beforeCreate')
},
created:function(){
alert('Created')
},
beforeMount:function(){
alert('beforeMount')
},
mounted:function(){
alert('Mounted')
}
})
</script>
</body>
</html>
三、非父子组件通信
vue中非父子组件通信需要借助一个空的vue实例，案例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<child></child>
<son></son>
</div>
<script src='js/vue.js'></script>
<script>
var bus=new Vue();//声明一个空的vue实例
Vue.component('child',{
template:`
<div>
<h1>这是child组件</h1>
<button @click='sendToChild'>按钮</button>
</div>
`,
data:function(){
return{
msg:'非父子组件通信'
}
},
methods:{
sendToChild:function(){
bus.$emit('send',this.msg)//使用空的vue实例去发送一个事件
}
}
})
Vue.component('son',{
template:`
<div>
<h1>这是son组件</h1>
<a>{{mess}}</a>
</div>
`,
data:function(){
return{
mess:''
}
},
mounted:function(){
bus.$on('send',txt=>{//使用空的vue实例去接收一个事件
this.mess=txt
console.log(this);
})
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
