vue3.0 组件互相嵌套不能渲染，有解吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1508 天前的主题，其中的信息可能已经有所发展或是发生改变。

组件 A 中引用组件 B，
B 中又引用 A，
页面 C 中引用 A，
此时页面不能正常渲染。
请教大佬们，有解吗？

另：复制 A 文件为 A2, 在 B 中引用 A2，
则能正常渲染。

组件

引用

渲染

Vue

20 条回复 • 2020-10-16 13:07:08 +08:00

fengxianqi

2020-10-16 09:33:47 +08:00

如果没有终止条件不就无限引用了？建议可以从设计上调整这种嵌套策略

faceRollingKB

2020-10-16 09:33:58 +08:00

额，A 、B 都注册到全局可以渲染么？我遇到过更奇葩的问题，同一个组件在 A 里面可以渲染，但在有弹窗的 B 里面无法渲染，去掉弹窗和注册到全局都可以解决

duanxianze

2020-10-16 09:41:50 +08:00

全局注册不过出现这种情况说明设计思路有问题

murongxdb

2020-10-16 09:42:15 +08:00

这不是循环引用了吧，这样的代码是很可怕的，建议不要这样写

LongMaoz

2020-10-16 09:43:13 +08:00

你用一面镜子对着另一面镜子？

dinggk

2020-10-16 09:46:22 +08:00

谢谢各位！
解释一下应用场景：
组件 A 是一个 Grid 列表组件，
组件 B 是一个表单组件。
列表组件中包含 B 组件用于编辑，
表单组件 B 中又会引用 A 显示一个 Grid 列表。
我觉得这个设计不算很特殊吧？

Ritr

2020-10-16 10:00:02 +08:00

这属于循环引用了，设计上应该规避掉

otakustay

2020-10-16 10:07:17 +08:00

其实挺常见的不是，比如说：
1. 用户列表可以通过 subrow 展开用户的详细信息（ UserList -> UserInfo ）
2. 用户信息里要展示一个关联用户的列表（ UserInfo -> UserList ）

SoulDee

2020-10-16 10:08:34 +08:00

你说的依赖只是在页面逻辑上存在列表嵌套表单，表单又嵌套列表。通过插槽来写应该是没有问题的，但是你的设计是直接将嵌套集成到组件当中了。

我说的再清楚点。你的设计是下面这样，也就是实际就用了组件 A

组件 A （包含了组件 B ），组件 B （包含了组件 A ）；
应用:
<A></A>

插件化，嵌套是在外层使用，而不是集成到组件中
组件 A （仅提供 grid 容器，有 slot 插槽），组件 B （仅提供表单容器和相应表单逻辑，有 slot 插槽）
应用：
<A>

<A></A>

</A>

codespots

2020-10-16 10:11:36 +08:00

@SoulDee 我觉得你说的是对的

yaphets666

2020-10-16 10:23:23 +08:00

循环引用多出现在制作"菜单"组件的时候,注意一定要有出口.也就是终止循环引用的条件. 理论上循环引用是没有问题的.也不是设计错误.反而是一种高阶技巧.

lin07hui

2020-10-16 10:43:16 +08:00

使用 A2 渲染也是不正常，会报 [Vue warn]: Failed to resolve component: B at <A2> at at <A> at <App> ，说明在 A2 时不会去渲染 B 。
我想你要的结果是：A 中有 B，B 中 A2，A2 中不需要 B 。
方法：列表组件不需要引用表单组件，使用 slot 渲染。表单组件引用列表组件。再添加一个可编辑列表组件，这个组件引用列表组件和表单组件