vue3 vnode如何使用？

Question

// father
    <LongList :data="data" :maxShow="10">
      <template #item="{ item }">
        <p>{{ item }}</p>
        <p>{{ item }}</p>
      </template>
    </LongList>

// LongList
  const slots = useSlots(); 
  let slotsArr = slots.item({ ... });

我希望通过js 来创建dom 并放置,但将vue 的vnode 转为dom 似乎只能使用 render ;
render 必须有根元素但我不希望有多余的东西 , 如此 slotsArr[0]/[1] 转换要怎么做呢？有解决方法吗？

Answer 1

所以在组件的业务代码中使用 jsx 不就好吗，为啥绕弯呢？
渲染函数 & JSX | Vue.js

如果有结构洁癖，单纯不想多一个 div 节点，可以借鉴 AntD Vue Pro 这块侧边栏组件的代码 👉 pro-layout/src/components/SiderMenu/BaseMenu.tsx at next · vueComponent/pro-components · GitHub

其实就是自定义个 list-item 组件，然后在 list 部分使用 map 返回一个集合插入到 list 组件当中。