我想通过父组件中的this.$emit的方法来触发子组件中的this.$on，应该要怎么做？
我做过的尝试：
使用vue2.x

style:

#parent {
        width: 200px;
        height: 200px;
        background-color: #eee;
    }
    
.child {
    width: 100px;
    height: 100px;
    background-color: red;
}

html:

<p id="parent" @click="test">
    <p>{{ total }}</p>
    <child v-on:increment="test"></child>
</p>

javascript:

Vue.component('child', {
    template: '<p class="child" @click.stop="add">{{ counter }}</p>',
    created: function() {
        //子组件初始化时监听'increment'事件
        this.$on('increment', function() {
            this.counter += 1;
        });
    },
    data: function() {
        return {
            counter: 0
        }
    },
    methods: {
        add: function() {
            //子组件中点击后执行,触发自身increment事件
            this.$emit('increment');
        }
    },
})
new Vue({
    el: '#parent',
    data: {
        total: 0
    },
    methods: {
        test: function() {
         //父组件中点击后执行,不触发子组件的increment事件
            this.total += 1;
            this.$emit('increment');
        }
    }
})