Vue 3 渲染循环依赖

Question

我遇到了一个有趣的问题，我不确定是否有更好的方法来解决这个问题。

使用 Vue 3、Typescript：

我有一个显示表格的组件，然后根据单击的表格单元格导入将使用的每个对话框。

就像

Table

一样简单：

<div class="table"></div>
<div class="dialogs">
   <Dialog1 />
   <Dialog2 />
</div>

在每个对话框内，它们都有一个共享组件来渲染字段（即，如果我想要标签、文本字段或按钮）。将该组件称为

MainDialog

。

一切正常；但是，我现在希望能够通过 MainDialog（因此任何对话框）内的按钮显示该表，该按钮将显示

Table

。

我在导入组件时得到

default' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

。

我想我理解这个问题是：

MainDialog

正在渲染

Table

，正在渲染

class="dialogs"

下的所有对话框，

MainDialog

正在渲染

Table

...等等。

这让我想到了我的问题：处理这个问题的正确方法是什么和/或在 vue 组件中创建对话框的正确方法是什么。

对于上下文：该表显示您可以选择和编辑的资产列表，在其中一个资产中您可以选择另一个资产来引用。我希望在那里能够看到相同的视图。

Answer 1

我认为解决这个问题的最佳方法是将递归渲染逻辑基本上转换为状态，例如在您的情况下，您可以拥有一个可组合的（或您正在使用的全局状态管理解决方案，如 pinia）来承载当前查看的状态组件，在您当前的情况下，您遇到的问题是，

MainDialog --renders--> Table --renders--> MainDialog --so on-->

您可以简单地在最可用的组件（或您将拥有该组件的页面）上使用一个组件，并且对话框的状态将存储在可组合的 useMainDialog 中，您只需将对话框内的状态作为 props 传递即可，在对话框中，您可以简单地导入可组合项，并根据用户操作或其他操作从那里操纵对话框的状态，这又会简单地将当前对话框的状态更新为您新的所需状态