Überschreibe Submit-Ereignis der Kindkomponente

Question

Ich habe 2 Komponenten, eine für ein 'Formular erstellen' und ein anderes für ein 'Formular bearbeiten'.
Ich verwende das 'create-form' innerhalb des 'edit-form'. Alles funktioniert gut, bis auf meine Submit-Methode.
Ich hatte gehofft, das Submit-Ereignis der 'create-form' zu überschreiben, aber es wird immer zuerst aufgerufen.
Ist es möglich und der richtige Weg, den ich versuche zu tun? Hier ist auch eine Geige mit dem, was ich zu erreichen versuche:
https://jsfiddle.net/DarkFruits/197wndq9/1/

HTML

<template id="form-create"> 
    <form @submit.self.prevent="raiseSubmit"> 
    <button type="submit">SUBMIT</button> 
    </form> 

</template> 

<template id="form-edit"> 
    <form-create v-bind:user="myUser" @submit.stop.capture.prevent="raiseSubmit" ></form-create> 
</template> 

<div id="app"> 
    <form-edit></form-edit> 
</div> 

JS

Vue.component('form-create', { 
    template: '#form-create', 
    props: { 
    user: { 
     default: { 
     username: '', 
     email: '', 
     } 
    } 
    }, 

    methods: { 
    raiseSubmit() { 
     console.log("I do not want Create submit to be called"); 
    } 
    } 
}) 

Vue.component('form-edit', { 
    template: '#form-edit', 
    data() { 
    return { 
     myUser: { 
     username: 'max', 
     email: 'max@example.com' 
     } 
    } 
    }, 

    methods: { 
    raiseSubmit() { 
     console.log("I want Edit submit to be called"); 
    } 
    } 
}) 

new Vue({ 
    el: '#app', 
    data() { 
    return {} 
    } 
}) 

Answer 1

Wenn Sie etwas in einer Komponente außer Kraft setzen möchten, müssen Sie Codieren Sie die Komponente, um die Überschreibung zu ermöglichen. Eine Möglichkeit wäre, eine boolesche Stütze hinzuzufügen, die, falls gesetzt, die Komponente ein Submit-Ereignis ausgibt (effektiv blubbernd), aber falls nicht, wird der übliche Handler ausgeführt.

Vue.component('form-create', { 
 
    template: '#form-create', 
 
    props: { 
 
    user: { 
 
     default: { 
 
     username: '', 
 
     email: '', 
 
     } 
 
    }, 
 
    defer: { 
 
     type: Boolean, 
 
     default: false 
 
    } 
 
    }, 
 
    methods: { 
 
    raiseSubmit(e) { 
 
     if (this.defer) { 
 
     this.$emit('submit', e); 
 
     } else { 
 
     console.log("I do not want Create submit to be called"); 
 
     } 
 
    } 
 
    } 
 
}) 
 

 
Vue.component('form-edit', { 
 
    template: '#form-edit', 
 
    data() { 
 
    return { 
 
     myUser: { 
 
     username: 'max', 
 
     email: 'max@example.com' 
 
     } 
 
    } 
 
    }, 
 
    methods: { 
 
    raiseSubmit() { 
 
     console.log("I want Edit submit to be called"); 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return {} 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<template id="form-create"> 
 
    <form @submit.prevent="raiseSubmit"> 
 
    {{user.username}} 
 
    <button type="submit">SUBMIT</button> 
 
    </form> 
 
    
 
</template> 
 

 
<template id="form-edit"> 
 
    <form-create v-bind:user="myUser" defer @submit.prevent="raiseSubmit"></form-create> 
 
</template> 
 

 
<div id="app"> 
 
    <form-edit></form-edit> 
 
</div>