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。&nbsp;不是不响应，而是每次结果都一样。