箭头函数:箭头函数就是没有function关键字,而是一个类似箭头的函数:
var a = ()=>{
return 1;
}
相当于:
function a(){
return 1;
}
mounted
注意 mounted
不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick替换掉 mounted
第三方量:var bus =new vue()
1.点击弹出效果
HTML部分
<div id='app'>
<child></child>
<son></son>
</div>
JS部分
<script>
var bus=new Vue();
Vue.component('child',{//A
template: `
<div>
<h1>我是child组件</h1>
<button @click='sendMsg'>发送数据给son</button>
</div>
`,
data: function() {
return {
msg:'hello vue'
}
},
methods:{
sendMsg:function(){
bus.$emit('send',this.msg)
}
}
})
Vue.component('son',{//B
template:`
<div>
<h1>我是son组件</h1>
<a href=''>{{mess}}</a>
</div>
`,
data:function(){
return{
mess:''
}
},
mounted:function(){
bus.$on('send',msg=>{//箭头函数
console.log(this);
this.mess=msg
})
}
})
new Vue({
el:'#app'
})
</script>
网友评论