console
Vue.component('my-componenta', {
props: ['count'],
template: `<button v-on:click="countAdd">You clicked me {{ count }} times.</button>`,
methods:{
countAdd(){
this.count++
this.$emit('count-add',this.count)
this.$root.hub.$emit('count-add',this.count)
}
}
})
Vue.component('my-componentb', {
data:function(){
return {
count:1
}
},
template:`<div>{{count}}</div>`,
created:function(){
var vm=this
vm.$root.hub.$on('count-add',function(val){
vm.count = val
})
}
})
new Vue({
el:'#app',
data:{
propCount:1,
hub:new Vue()
},
methods:{
propCountAdd:function(count){
this.propCount=count
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<my-componenta :count='propCount' v-on:count-add="propCountAdd"></my-componenta>
<my-componentb></my-componentb>
</div>