親が発する - VueJS

Question

をここでは、子コンポーネントである：ここで

Vue.component("training-edit", { 
    template: "#training-edit-template", 
    props: ["show"], 
    data: function() { 
     return { 
      form: new Form(), 
      isWorking: false 
     } 
    }, 
    watch: { 
     show: function (val) { 
      if (val) { 
       $("#editTrainingModal").modal("show"); 
      } else { 
       $("#editTrainingModal").modal("hide"); 
      } 
     } 
    }, 
    methods: { 
     onCancel: function() { 
      this.$emit("doneEditing"); 
     } 
    } 
}); 

は、親である：

new Vue({ 
    el: "#trainingEditContainer", 
    data: { 
     isWorking: false, 
     showEditTraining: false 
    }, 
    methods: { 
     onEdit: function (e) { 
      e.preventDefault(); 
      this.showEditTraining = true; 
     }, 
     doneEditing: function() { 
      this.showEditTraining = false; 
     } 
    } 
}); 

HTML：私は見ることができます

<div id="trainingEditContainer" class="row"> 
    // unrelated stuff here 

    <training-edit v-bind:show="showEditTraining"></training-edit> 
</div> 
<script id="training-edit-template" type="x-template"> 
    <modal-right modalId="editTrainingModal"> 
     <div class="modal-header"> 
      <button type="button" class="close" v-on:click="onCancel" aria-label="close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Edit Training</h4> 
     </div> 
     @Html.Partial("Partial/_EditPartial") 
    </modal-right> 
</script> 

ChromeのVueデベロッパーツールでイベントが送出されているのに何らかの理由で親が聞いていないし、doneEditing関数が呼び出されることはありません。私はここで何かを見逃していますか？

Answer 1

まず、イベントの名前をdone-editingに変更することをお勧めします。

this.$emit("done-editing") 

HTMLの属性は大文字小文字を区別しないで、あなたがDOMにテンプレートの一部をレンダリングしている場合、それはすべての周りavoid camelCased namesにちょうど良いでしょうからです。文字列でテンプレートを定義した場合、または単一のファイルコンポーネントを使用している場合は、これは当てはまりません。

次に、コンポーネントでリッスンする必要があります。

イベントをコンポーネントから放出するとき、親は明示的にイベントをリッスンする必要があります。