用bus实现A组件显示count,B组件进行+1操作
- 创建事件总线
const bus = new Vue()
- bus.$emit()暴露出去
Vue.component('bb',{
template:`
<div>
<button type="button" @click="add(1)">+1</button>
</div>
`,
methods:{
add(num){
bus.$emit('add',num)
}
}
})
- bus.$on()是接收传递的参数
Vue.component('aa',{
template:`
<div>
<h3>{{count}}</h3>
</div>
`,
data(){
return {
count:0
}
},
created(){
bus.$on('add',(n)=>{
this.count += n
})
},
methods:{
}
})