V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
WarlockMan
V2EX  ›  问与答

vue 如何用模板描述较为复杂的动态结构?

  •  
  •   WarlockMan · 74 天前 · 736 次点击
    这是一个创建于 74 天前的主题,其中的信息可能已经有所发展或是发生改变。
    传统的 js 思想是用指令把 dom 结构动态生成出来,
    声名式思想则是用模板语法把 dom 结构"描述"出来,

    但如果遇到这类情景,该怎么做呀?

    情景:dom 结构无法在运行前就确定,而是需要在运行时,根据数据的不同,动态确定结构,
    而且结构可能没有规律性,这导致难以用模板去预先"描述"结构,
    传统 js 做法是通过迭代数据,动态生成 dom ,指令式思想在这方面比较灵活,

    虽然在 vue 的<script>代码区内,也可以用传统 js 代码来动态生成标准 html 元素来动态操作 dom:

    const div = document.createElement('div')
    parentElement.append(div)

    这样就能动态生成元素,并动态增加和插入元素到 dom ,

    但如果我们想要动态创建的不是原生标准 html 元素,而是一个 vue 组件,那该怎么办呢?
    我想在 vue 的<script setup>代码区内,实现类似的行为:

    import 'Child' from 'Child.vue'

    const child_vue_component = new Child()
    parent_vue_component.append(child_vue_component)

    我想实现类似这样的效果该怎么做呀?


    我知道的可能跟这种情景沾边的东西是 vue 的 动态组件 和 异步组件,
    可模板终归是只适合描述 运行前就确定 的结构,
    如果遇到 运行前无法确定的 DOM 结构,或许还是需要一套指令式 api 来动态操作组件树

    一个典型的例子是 TreeView 结构,它同时满足:
    1.存在父子组件关系(嵌套关系?)
    2.运行时才能确定结构

    虽然网上的答案都是在模板语法中用递归组件自身来描述这种特殊结构,
    但这也太幸运了,递归恰巧可以"描述"树状结构,但如果情景再复杂些,再多变些,
    模板描述肯定会有遇到局限的时候不是么。
    5 条回复    2024-03-16 16:32:56 +08:00
    jazzg62
        1
    jazzg62  
       74 天前   ❤️ 1
    {
    component:{
    component1:()=>import('./component1.vue')
    }
    }
    异步组件,然后还是循环去根据条件显示组件。似乎这样就可以实现你的需求,但是我没有实践过,你可以试试
    paopjian
        2
    paopjian  
       74 天前   ❤️ 1
    插槽
    JSX
    haah
        3
    haah  
       73 天前
    答案:跳出模板思维。
    Charrlles
        4
    Charrlles  
       73 天前 via iPhone
    用渲染函数,vue 模板本质上也是渲染函数
    pavlos
        5
    pavlos  
       73 天前
    组件构建成 js 文件,下载挂载上
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5521 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:11 · PVG 11:11 · LAX 20:11 · JFK 23:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.