Vue 递归组件不渲染

Question

我正在使用 vue.js 和 vue-cli 构建一个应用程序，您可以在其中配置订单。用户应该能够选择他们是否要在每个订单之后配置另一个订单，或者是否完成。为此，我想递归地重用我的订单组件：

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

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

如您所见，我在我的组件中使用了一个布尔变量，如果单击“配置附加订单”按钮，该变量应该会额外显示同一组件。我使用自定义事件将数据传递给父组件 (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
    }
  },
...

Vue 递归组件不渲染

Vue Recursive Component Not Rendering

javascript

vue.js

vue-component

vue-cli