vue组件通信

Question

代码就是网上的demo：
<div id="app4">

    <display></display>
    <increment></increment>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
    var bus=new Vue();
    Vue.component('display',{
        template:'<button @click="add">+</button>',
        data:function(){
            return {count:0}
        },
        methods:{
            add:function(){
                bus.$emit('inc',this.count+1)
            }
        }
    })
    Vue.component('increment',{
        template:'<span> Click: {{c}} times</span>',
        data:function(){
            return {c:0}
        },
        created:function(){
            var _this=this;
            bus.$on('inc',function(num){
                _this.c=num
            })
        }
    })
    vm=new Vue({
        el:'#app4'
    })
</script>

为什么这个click触发一次之后就不再响应了，加到1后就不再增加了？

Answer 1

因为每次'display'组件触发的传值都是1啊，所以'increment'组件拿到的值就只能是1。
不是不响应，而是每次结果都一样。

Answer 2

add:function(){

this.count++;
bus.$emit('inc',this.count)

}