Vue 2 - 點擊或輸入事件觸發$時發出的不同行爲

Question

在下面的（fiddle here）中，下面的點擊事件觸發的$ 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; 
    } 
    } 
}); 

只是爲了讓上面的可讀性，爲子組件的模板是

<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>