Vue 2 - 클릭 이벤트 또는 입력 이벤트에서 실행되었을 때 $emit에서 다른 동작

Vue 2 - 클릭 이벤트 또는 입력 이벤트에서 실행되었을 때 $emit에서 다른 동작

아래 (여기에 fiddle)에서는 아래 클릭 이벤트에서 발생하는 $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;
    }
  }
});

위의 내용을 읽기 쉽게 하기 위해 자 컴포넌트의 템플릿은 다음과 같습니다.

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

SO가 아닌 다른 사람이 도와줬는데, 그 정보를 여기에 올릴게요.여기서의 문제는, 이벤트도 이미터도 아니고, 오히려 html의 대소문자를 구별하지 않는 것입니다.@some Camel Cased Event는 실제로 @some Camel Cased Event. working fiel로서 javascript에 전달되는 것 같습니다.

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


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

언급URL : https://stackoverflow.com/questions/42438249/vue-2-different-behavior-on-emit-when-fired-from-click-or-input-event