Vue.js 在子组件和父组件之间没有发出事件

Question

我在下面有一个模态形式的组件

<div>
<b-alert variant="danger" :show="errorAlert">
    <pre class="my-4">Something went wrong</pre>
    <pre class="my-4">Message: {{errorMsg}}</pre>
    <p class="my-4">Status: {{statusCode}}</p>
</b-alert>

<div v-if="!errorAlert">
    <b-row>
        <b-col cols="1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
        </b-col>

        <b-col cols="2">
    <b-button size="md" variant="success" v-b-modal.announceModal>
            Announce new
        </b-button>

            <b-modal id="announceModal" title="Announce a tournament" @ok="handleOK" @cancel="handleCancel" >
                <AnnounceForm />
            </b-modal>
        </b-col>
    </b-row>
        <b-table striped hover responsive :items="tournaments" :fields="fields"
             :per-page="perPage" :current-page="currentPage"></b-table>
</div>

它的按钮应该通过这些处理程序向表单发送事件

 handleOK(){
            this.$emit('submit');
        },
        handleCancel(){
            this.$emit('reset');
        }

子窗体

<div>
<b-form @sumbit="announceTournament" @reset="resetForm" ref="announce">
    <b-form-group id="nameGroup"
                  label="Tournament name:"
                  label-for="nameInput">
        <b-form-input id="nameInput"
                      type="text"
                      v-model="tournament.name"
                      required
                      placeholder="Enter name">
        </b-form-input>
    </b-form-group>
    <b-form-group id="depositGroup"
                  label="Tournament deposit:"
                  label-for="depositInput">
        <b-form-input id="depositInput"
                      type="text"
                      v-model="tournament.deposit"
                      required
                      placeholder="Enter deposit">
        </b-form-input>
    </b-form-group>
</b-form>

子表单有这两个事件（@submit 和 @reset）。事件是 BootstrapVue 的默认事件虽然模态按钮 hadlers 工作正常，但没有发出任何事件。缺少什么？

Answer 1

尝试在$root 上发射：

handleOK(){
    this.$root.$emit('submit');
},
handleCancel(){
    this.$root.$emit('reset');
}

检查this answer，因为它可能与您的问题有关。