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

[WarlockMan]

传统的 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.运行时才能确定结构

虽然网上的答案都是在模板语法中用递归组件自身来描述这种特殊结构，
但这也太幸运了，递归恰巧可以"描述"树状结构，但如果情景再复杂些，再多变些，
模板描述肯定会有遇到局限的时候不是么。

[jazzg62]

{
component:{
component1:()=>import('./component1.vue')
}
}
异步组件，然后还是循环去根据条件显示组件。似乎这样就可以实现你的需求，但是我没有实践过，你可以试试

[paopjian]

插槽
JSX

[haah]

答案：跳出模板思维。

[Charrlles]

用渲染函数，vue 模板本质上也是渲染函数

[pavlos]

组件构建成 js 文件，下载挂载上