Vue 两个组件相互引用,就不能显示?

150 阅读2分钟

写在前面

遇到一个奇葩问题:一个表格组件,点击某单元格,弹出一个弹窗,弹窗里内容依然是这个表格组件,只是加载的数据不一样。

起初以为是个简单的需求,谁知被深深的上了一课

尝试解决

遇到的问题是,表格的组件不渲染,F12看dom结构里直接显示组件名

起初判断是组件引入不对,在模版里和在script里分别打印组件相关信息,模版里显示undefined,script里打印正常组件对象。

说明组件引入没问题,模版预编译有问题;

考虑到两个组件相互引用,所以着重在递归方面排查,加了很多条件判断防止无限递归,没有效果...

化繁为简验证

控制台从始至终,没有相关报错,页面也没有递归卡死情况...

实在没有办法,只能用最小可行性demo,验证方案是否可行。

正常递归组件

首先是组件递归,直接内部引用自己,只要注意组件名和出口,OK没问题;

弹窗中递归

然后是弹窗递归,在弹窗中引用自己没问题,而且不给递归出口也可以,说明在弹窗中可能不是递归问题。

组件外递归

最后是把弹窗拆成组件,在表格组件引入,弹窗里也需要引入表格组件,形成相互引用,不显示!!!!

通过验证,说明方案本身有问题,是两个组件相互引用导致的。。

调整方案

OK,找到原因,如何解决呢?

难道不能这样实现?不该啊,对于单组件来说,内部逻辑应该是一样的

外事不决用bing...

然后,搜索【两个组件相互引用显示异常】?

妥妥的,第一条就是标准答案

image.png