我正在使用vue.js和vue-cli構建一個應用程序，您可以在其中配置訂單。用戶應該能夠選擇是否要在每個訂單后配置另一個訂單，或者是否完成。為了實現這一目標，我想遞歸地重用我的訂單組件：訂單.vue：<template>  <div id="order">    <other> // just to show that I used other components here and how    <div>      <button class="CustomButton" v-on:click="finalizeOrder">        Finalize Order      </button>      <button class="CustomButton" v-on:click="configureAdditionalOrder">        Configure Additional Order      </button>    </div>    <order v-if="additionalOrder" @passOrderObject="catchOrderObjectFromRecursiveChild" @finalizeOrder="passFinalizeOrder" />  </div></template><script>import Other from '@/components/Other.vue'export default {  components: {    Other  },  data () {    return {      additionalOrder: false    }  },  methods: {    configureAdditionalOrder () {      this.buildOrderObject()      this.additionalOrder = true    },    catchOrderObjectFromRecursiveChild (order) {      this.$emit('passOrderObject', order)    },    passFinalizeOrder () {      this.$emit('finalizeOrder')    },    finalizeOrder () {      this.buildOrderObject()      this.$emit('finalizeOrder')    },    buildOrderObject () {      var order = {        name: "abc",        price: "1000"      }      this.$emit('passOrderObject', order)    }  }</script><style></style>應用程序視圖：<template>  <div id="app">    <h1>Ordering System</h1>    <order @passOrderObject="catchOrderObject" @finalizeOrder="finalizeOrder" />  </div></template><script>import Vue from 'vue'import Order from '@/components/Order.vue'export default {  el: '#app',  components: {    Order  },  data () {    return {      finalization: false,      orderObjects: []    }  },  methods: {    finalizeOrder () {      this.finalization = true    },   catchOrderObject (order) {      this.orderObjects.push(order)    }</script>正如您所看到的，我在組件中使用了一個布爾變量，如果單擊“配置附加訂單”按鈕，該變量應該再次顯示相同的組件。我使用自定義事件將數據傳遞到父組件 (App.vue)，訂單組件只需進一步傳遞它們即可處理來自其遞歸子組件的這些事件。應用程序本身可以工作，但是單擊按鈕來配置附加訂單除了發出自定義事件之外什么也不做。我在這里做錯了什么？