Vue递归组件不渲染

Question

我正在使用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>

应用程序.vue：

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

如您所见，我在组件中使用了 boolean 变量，如果单击“配置附加订单”按钮，该变量应再次显示相同的组件。 我使用自定义事件将数据传递给父组件（App.vue），订单组件可以通过进一步传递它们来处理来自其递归子级的这些事件。

该应用程序本身可以工作，但单击按钮配置附加订单除了发出自定义事件之外什么都不做。 我在这里做错了什么？

Answer 1

对于递归组件，您应该为该组件提供一个名称：

<script>
import Other from '@/components/Other.vue'

export default {
  name:'order',// this is the component name
  components: {
    Other
  },
  data () {
    return {
      additionalOrder: false
    }
  },
...