Vue 2 - クリックイベントまたは入力イベントから発生した$ emitでの異なる動作

Question

以下の（fiddle here）では、以下のclickイベントによって発生した$ emitが期待通りに機能します。入力イベントによって発生した$ emitは同じ方法で配線されていますが、親は$ emitを受け取っていません。

<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; 
    } 
    } 
}); 

ただ、上記読みやすくするために、子コンポーネント用のテンプレートは、SOの外

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

Answer 1

誰かであるが、この上で私を助けて、私はここで自分の情報を投稿します。ここでの問題はイベントでもエミッタでもなく、htmlの大文字と小文字を区別しないことです。 @someCamelCasedEventは実際に@somecamelcasedeventのようにjavascriptに渡されているようです。 working fiddle

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


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