子组件向父组件通信

子组件用$emit()触发事件,父组件用$on()监听子组件事件

 <div id="app">
    <p>总数:{{ total }}</p>
    <!-- 父组件直接在子组件的自定义标签上使用v-on监听子组件触发的自定义事件 -->
    <my-component  @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    Vue.component('my-component',{
        template:'<div><button @click="handleIncrease">+1</button><button @click="handleReduce">-1</button></div>',
        data:function(){
            return { counter:0 }
        },
        methods:{
            handleIncrease:function(){
                this.counter++
                // 通过$emit()传递给父组件,第一个参数是自定义事件的名称,第二个是要传递的数据,可以不填或填多个
                this.$emit( 'increase',this.counter )
            },
            handleReduce:function(){
                this.counter--
                this.$emit( 'reduce',this.counter )
            }
        }
    });

    var app = new Vue({
        el:'#app',
        data:{
            total:0
        },
        methods:{
            handleGetTotal:function(t){
                this.total = t;
            }
        }
    })
</script> 

You may also like...