Vue.js 覆盖子组件的提交事件

我有两个组件，一个用于“创建表单”，另一个用于“编辑表单”。
我正在“编辑表单”中使用“创建表单”。除了我的提交方法，一切都很好。
我希望覆盖“创建表单”的提交事件，但它总是先被调用。
这是可能的，也是我正在尝试的正确方式吗？以下是我试图实现的目标：

HTML

---

如果要覆盖组件中的某些内容，则需要对组件进行编码以允许覆盖。一种方法是添加一个布尔属性，如果设置了该属性，组件将发出一个提交事件（实际上是冒泡），但如果没有，它将运行其常用的处理程序

Vue.component（'form-create'{
模板：“#表单创建”，
道具：{
用户：{
默认值：{
用户名：“”，
电子邮件：“”，
}
},
推迟：{
类型：布尔型，
默认值：false
}
},
方法：{
raiseSubmit（e）{
如果（此延迟）{
这.$emit（'submit'，e）；
}否则{
log（“我不想调用Create submit”）；
}
}
}
})
Vue.component（'form-edit'{
模板：“#表单编辑”，
数据（）{
返回{
我的用户：{
用户名：“max”，
电邮:'max@example.com'
}
}
},
方法：{
raiseSubmit（）{
log（“我希望调用Edit submit”）；
}
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{}
}
})

{{user.username}
提交

哦，是的，你是对的。我应该知道我不能听我孩子的故事谢谢

<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>

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 {}
  }
})