Vue 2 - 클릭 또는 입력 이벤트에서 발생하는 $ emit에 대한 다른 동작

Question

아래 (fiddle here)에서 아래의 click 이벤트로 인해 발생 된 $ emit은 예상대로 작동합니다. 입력 이벤트에 의해 발생 된 $ emit은 같은 방법으로 유선화되어 있지만 부모는 $ emit을 수신하지 않습니다. SO이 나를 도와, 나는 여기에 자신의 정보를 게시합니다 외부

<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처럼 자바 스크립트에 전달됩니다. working fiddle

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


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