V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dinggk
V2EX  ›  Vue.js

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

  •  
  •   dinggk · 2020-10-16 09:23:08 +08:00 · 5128 次点击
    这是一个创建于 1498 天前的主题,其中的信息可能已经有所发展或是发生改变。
    组件 A 中引用组件 B,
    B 中又引用 A,
    页面 C 中引用 A,
    此时页面不能正常渲染。
    请教大佬们,有解吗?

    另:复制 A 文件为 A2, 在 B 中引用 A2,
    则能正常渲染。
    20 条回复    2020-10-16 13:07:08 +08:00
    fengxianqi
        1
    fengxianqi  
       2020-10-16 09:33:47 +08:00   ❤️ 1
    如果没有终止条件不就无限引用了?建议可以从设计上调整这种嵌套策略
    faceRollingKB
        2
    faceRollingKB  
       2020-10-16 09:33:58 +08:00
    额,A 、B 都注册到全局可以渲染么?我遇到过更奇葩的问题,同一个组件在 A 里面可以渲染,但在有弹窗的 B 里面无法渲染,去掉弹窗和注册到全局都可以解决
    duanxianze
        3
    duanxianze  
       2020-10-16 09:41:50 +08:00   ❤️ 1
    全局注册 不过出现这种情况说明设计思路有问题
    murongxdb
        4
    murongxdb  
       2020-10-16 09:42:15 +08:00
    这不是循环引用了吧,这样的代码是很可怕的,建议不要这样写
    LongMaoz
        5
    LongMaoz  
       2020-10-16 09:43:13 +08:00
    你用一面镜子对着另一面镜子?
    dinggk
        6
    dinggk  
    OP
       2020-10-16 09:46:22 +08:00
    谢谢各位!
    解释一下应用场景:
    组件 A 是一个 Grid 列表组件,
    组件 B 是一个 表单组件。
    列表组件中包含 B 组件用于编辑,
    表单组件 B 中又会引用 A 显示一个 Grid 列表。
    我觉得这个设计不算很特殊吧?
    Ritr
        7
    Ritr  
       2020-10-16 10:00:02 +08:00
    这属于循环引用了,设计上应该规避掉
    otakustay
        8
    otakustay  
       2020-10-16 10:07:17 +08:00
    其实挺常见的不是,比如说:
    1. 用户列表可以通过 subrow 展开用户的详细信息( UserList -> UserInfo )
    2. 用户信息里要展示一个关联用户的列表( UserInfo -> UserList )
    SoulDee
        9
    SoulDee  
       2020-10-16 10:08:34 +08:00   ❤️ 3
    你说的依赖只是在页面逻辑上存在列表嵌套表单,表单又嵌套列表。通过插槽来写应该是没有问题的,但是你的设计是直接将嵌套集成到组件当中了。

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

    组件 A (包含了组件 B ),组件 B (包含了组件 A );
    应用:
    <A></A>

    插件化,嵌套是在外层使用,而不是集成到组件中
    组件 A (仅提供 grid 容器,有 slot 插槽),组件 B (仅提供表单容器和相应表单逻辑,有 slot 插槽)
    应用:
    <A>
    <B>
    <A><B></B></A>
    </B>
    </A>
    codespots
        10
    codespots  
       2020-10-16 10:11:36 +08:00
    @SoulDee 我觉得你说的是对的
    yaphets666
        11
    yaphets666  
       2020-10-16 10:23:23 +08:00
    循环引用多出现在制作"菜单"组件的时候,注意一定要有出口.也就是终止循环引用的条件. 理论上循环引用是没有问题的.也不是设计错误.反而是一种高阶技巧.
    lin07hui
        12
    lin07hui  
       2020-10-16 10:43:16 +08:00
    使用 A2 渲染也是不正常,会报 [Vue warn]: Failed to resolve component: B at <A2> at <B> at <A> at <App> ,说明在 A2 时不会去渲染 B 。
    我想你要的结果是:A 中有 B,B 中 A2,A2 中不需要 B 。
    方法:列表组件不需要引用表单组件,使用 slot 渲染。表单组件引用列表组件。再添加一个可编辑列表组件,这个组件引用列表组件和表单组件
    no1xsyzy
        13
    no1xsyzy  
       2020-10-16 10:50:42 +08:00
    不就是递归吗?有什么可怕的?
    强耦合不要分文件(甚至不要分两个组件,直接调用自己就成了)
    弱耦合用插槽化把递归提升到父层
    Hilong
        14
    Hilong  
       2020-10-16 10:59:39 +08:00 via iPhone
    注意递归的结束条件就行了,肯定要有个约束的啊
    fool079
        15
    fool079  
       2020-10-16 11:29:46 +08:00
    这种注册为全局组件就可以了
    HugoV
        16
    HugoV  
       2020-10-16 11:35:13 +08:00
    可以试试异步引入
    components: { A: () => import('A.vue') } 这样的写法
    feilaoda
        17
    feilaoda  
       2020-10-16 11:53:05 +08:00
    <A><slot></slot></A>

    <B><slot></slot></B>

    不应该这样设计么?管你嵌套不嵌套呢
    ddllzz
        18
    ddllzz  
       2020-10-16 13:03:11 +08:00
    #16 是可行的
    aheadin
        19
    aheadin  
       2020-10-16 13:05:18 +08:00 via iPhone
    嵌套组件选择器:>>>
    不推荐多用
    aheadin
        20
    aheadin  
       2020-10-16 13:07:08 +08:00 via iPhone
    @aheadin 不好意思,看错了~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5706 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 01:42 · PVG 09:42 · LAX 17:42 · JFK 20:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.