覆蓋子組件的提交事件

Question

我有2個組件，一個用於'創建表單'，另一個用於'編輯表單'。
我正在使用'編輯表單'內的'創建表單'。一切運作良好，除了我的提交方法。
我希望覆蓋「創建表單」的提交事件，但它總是被首先調用。
是否有可能和我想要做的正確方法？這裏也是與我想實現一個小提琴：
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

如果你想覆蓋的東西在一個組件，您將需要編碼組件以允許覆蓋。一種方法是添加一個布爾屬性，如果設置，組件會發出一個提交事件（有效冒泡），但如果不是，它將運行其通常的處理程序。

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>