子コンポーネントのサブミットイベントのオーバーライド

Question

私は2つのコンポーネントを持っています.1つは「作成フォーム」用で、もう1つは「編集フォーム」用です。
私は '編集フォーム'内で '作成フォーム'を使用しています。私のサブミットメソッドを除いて、すべてうまくいきます。
私は 'create-form'のsubmitイベントをオーバーライドすることを望んでいましたが、常に最初に呼び出されます。
これは可能なのですか、正しい方法でやりたいのですか？ここにも私が達成しようとしているものとフィドルです：
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

あなたがコンポーネントで何かを上書きしたい場合は、あなたがする必要があります。オーバーライドを許可するコンポーネントをコーディングします。 1つの方法はブール値の小道具を追加することです。設定されていれば、コンポーネントは送信イベントを送出します（効果的に吹き出します）。そうでなければ通常のハンドラを実行します。

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>