Vue递归组件不渲染

Posted 2023-02-23

【中文标题】Vue递归组件不渲染

【英文标题】：Vue Recursive Component Not Rendering

【发布时间】：2021-03-10 01:06:50

【问题描述】：

我正在使用 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），订单组件可以通过进一步传递它们来处理来自其递归子级的这些事件。

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

【问题讨论】：

您在additonalOrder 中有错字。应该是additionalOrder。

@str 感谢您指出这一点！现在更正了。

【参考方案1】：

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

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

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