Eltern nicht auf das Kind $ hören emittieren - VueJS

Question

Hier ist das Kind Komponente:

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"); 
     } 
    } 
}); 

Hier ist die Mutter:

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> 

Ich sehe in kann die Vue-Entwicklertools in Chrome, in denen das Ereignis ausgegeben wird, aber aus irgendeinem Grund, das Elternteil hört es nicht und die doneEditing Funktion wird nie aufgerufen. Fehle ich etwas Offensichtliches hier?

Answer 1

Zuerst empfehle ich Ihnen, den Namen des Ereignisses in done-editing zu ändern.

this.$emit("done-editing") 

Dies liegt daran, dass Attribute in HTML Fall sind unempfindlich und wenn Sie einige Ihrer Vorlage auf den DOM rendern, es ist nur besser rundum avoid camelCased names. Beachten Sie, dass dies nicht gilt, wenn Sie die Vorlagen in Zeichenfolgen definieren oder wenn Sie einzelne Dateikomponenten verwenden.

Dann müssen Sie auf der Komponente darauf achten.

Wenn Sie ein Ereignis von einer Komponente ausgeben, muss das übergeordnete Element explizit auf das Ereignis warten.