非父子传值
<div id="app">
<dad></dad>
<son></son>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var bus = new Vue()
Vue.component('dad',{
template:`
<div>
<h1>啊啊啊啊啊</h1>
</div>
`,
data:function(){
return{
mg:'hello Word'
}
},
methods:{
sendmg:function(){
bus.$emit('send',this.mg)
}
}
})
Vue.component('son',{
template:`
<div>
<h1>嗯嗯嗯嗯</h1>
<a href="">{{me}}</a>
</div>
`,
data:function(){
return{
me:''
}
},
methods:{
sendme:function(){
bus.$on('send',mg=>{
console.log(this);
this.mg=me
})
}
}
})
new Vue({
el:'#app'
})
</script>
生命周期
<div id='app'>{{msg}}</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
beforeCreate:function(){
alert('beforeCreated');
},
created:function(){
alert('created')
},
beforeMount:function(){
alert('beforMount')
},
mounted:function(){
alert('mounted')
}
})
</script>
网友评论