Vue 2 - unterschiedliches Verhalten bei $ emitter, wenn es von einem Klick- oder Eingabeereignis ausgelöst wird

Question

In der folgenden Tabelle (fiddle here) funktioniert das durch das Klickereignis gefeuerte $ emit wie erwartet. Das durch das Eingabeereignis gefeuerte $ emit wird (/ scheint) auf die gleiche Weise verdrahtet, aber das Elternteil erhält das $ emit nicht.

<div id="app"> 
    {{ message }} 
    <child-comp 
    :prop="property" 
    @emitted="receiveEmit" 
    @emittedFromInput="receiveEmitFromInput" 
    ></child-comp> 
{{ otherMessage }} 
</div> 


Vue.component('child-comp', { 
    template: '<div><button @click="sendEmit">emit</button><input type="text" @input="onInput"><p v-if="inputEventFired">The input event fired</p></div>', 
    data: function() { 
    return { 
     inputEventFired: false 
    }; 
    }, 
    methods: { 
    onInput: function(e) { 
     this.inputEventFired = true; 
     this.$emit('emittedFromInput', 'never see this'); 
    }, 
    sendEmit: function() { 
     this.$emit('emitted', 'can change from click event that emits'); 
    } 
    } 
}); 

new Vue({ 
    el: '#app', 
    data: function() { 
    return { 
     message: 'allo', 
     otherMessage: 'cannot change this from input event that emits' 
    }; 
    }, 
    methods: { 
    receiveEmit: function(val) { 
     this.message = val; 
    }, 
    receiveEmitFromInput: function(val) { 
     alert('i do not happen') 
     this.message = val; 
    } 
    } 
}); 

Gerade die oben besser lesbar zu machen, ist die Vorlage für das Kind Komponente

<div> 
    <button @click="sendEmit">emit</button> 
    <input type="text" @input="onInput"> 
    <p v-if="inputEventFired">The input event fired</p> 
</div> 

Answer 1

Jemand außerhalb SO von mir auf diesem geholfen, und ich werde ihre Informationen hier posten. Das Problem hier ist weder die Ereignisse noch der Emitter, sondern eher (meine Unkenntnis) die Groß- und Kleinschreibung von HTML. Es scheint, dass @someCamelCasedEvent tatsächlich an das Javascript als @somecamelcasedevent weitergegeben wird. working fiddle

this.$emit('emitted-from-input', 'never see this'); 


<child-comp 
    @emitted="receiveEmit" 
    @emitted-from-input="receiveEmitFromInput"> 
</child-comp>