覆盖子组件的提交事件

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>