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中的事件是默認事件。 什么東西少了？

Answer 1

嘗試在$root上發射：

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

檢查此答案，因為它可能與您的問題有關。