Vue 2 - 從click或input事件觸發時$ emit的不同行為

Question

在下面（ 小提琴 ），下面的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;
    }
  }
});

為了使上面的內容更具可讀性，子組件的模板是

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

Answer 1

SO以外的人幫助了我，我會在這里發布他們的信息。 這里的問題既不是事件也不是發射器，而是（我的無知）html的不區分大小寫。 似乎@someCamelCasedEvent實際上是作為@somecamelcasedevent傳遞給javascript的。 工作小提琴

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


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