需要相互转换的场景并不多,今天在其他封装的框架传参时遇到了,特此记录分享一下。

1.得到虚拟dom(VNode)

import { h } from 'vue'
import comp from './comp.vue'
// 使用h函数转换
const compVnode = h(comp)

2.将虚拟Dom(VNode)转化为dom(组件)

<template>
  <comp />
</template>

<script setup lang="ts">
  import { defineComponent, isVNode } from 'vue'
  interface PropsInterface {
    vnode: any
  }
  const props = defineProps<PropsInterface>()
  const comp = defineComponent({
    render() {
      return props.vnode
    }
  })

  // 判断是否为VNode
  console.log(isVNode(props.vnode))
</script>

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐