javascript - vue路由页面引入当前组件的问题？

Question

页面路由是这样：

{
    path: 'preview/:instanceId',
    name: 'Preview',
    component: () => import('@/views/data-view/instance/preview.vue'),
    meta: {
      title: 'xxx',
    }
}

// preview.vue
<template>
  <div :style="convertStyleData(item, item.option)">
    <Chart :item="item" />
  </div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
import { convertStyleData } from '@/utils/coverData'
import Chart from '@/views/chart.vue'

export default {
  name: 'preview',
  components: {
    Chart
  },
  data() {
    return {
      convertStyleData,
      item: {
        type: 'Container'
      }
    }
  }
}
</script>

// Chart
<template>
  <div>
    <component
      :is="item.type"
      :item="item"
    />
  </div>
</template>

//container
<template>
 <div>
    <preview-page />
 </div>
</template>

<script>
export default {
  name: 'Container',
  props: ['item']
  components: {
    PreviewPage: defineAsyncComponent(() => import('@/views/data-view/instance/preview.vue'))
  }
}
</script>

简单点说就是访问/#/preview/123页面

preview=>chart(动态组件)=>Container=>=preview

报错如下：

chatGPT回答如下：

这个错误通常是由于组件之间的递归调用导致的。
在你的代码中，Preview组件中渲染了一个Chart组件，Chart组件又渲染了一个动态组件 <component :is="item.type" :item="item"/>，这个组件会根据item.type的值动态渲染不同的组件。在这个例子中，item.type的值是Container，因此会渲染Container组件。Container组件中又渲染了一个Preview组件，这样就形成了一个组件的递归调用关系。
为了解决这个问题，你可以尝试以下几种方法：

1. 检查组件之间的嵌套关系，确保没有出现递归调用的情况。
2. 检查动态组件的使用方式，确保不会出现无限递归的情况。可以使用v-if或者v-show来控制动态组件的渲染，避免出现无限递归的情况。
3. 将递归调用的组件改为非递归调用的方式。可以使用循环或者迭代的方式来处理组件之间的关系，避免出现递归调用的情况。
4. 需要具体分析代码来找出问题所在，并根据具体情况来选择合适的解决方法。

不知道怎么解决，我知道这样是无限递归了，但是怎么设置终止条件呢？
业务就是在预览页面嵌套N个预览页，但是不能用iframe

Answer 1

动态渲染也只是会渲染子组件，外部的容器也怎么搞成动态渲染了，容器始终保持一个呀
这个里面的逻辑是不是有问题

// Chart
<template>
  <div>
    <component
      :is="item.type"
      :item="item"
    />
  </div>
</template>