vue3如何动态添加组件到dom中（jsx,h(),render）_vue动态添加dom元素

背景，在写自定义指令的时候遇见，需要把svg图标组件动态添加到div中，然后把方法绑定到图标上

1、创建jsx

import IconSvg from "@/components/IconSvg/IconSvg.vue";
 
const renderDom = () => {
    return (
        <IconSvg class="iconf" svg-name="wh-if-papers" ref="elsvg" />
    )
}
 
export default renderDom;

2、使用

import { h, render } from 'vue'
import renderDom from "./copy-icon"
 
 
 
//取一段代码  el：dom元素
 
const iconCopy = h(renderDom, { onClick: () => copyHandleClick(el.innerText), style: { cursor: 'copy' } }) 
        console.log("动态组件", iconCopy)
render(iconCopy, el)

效果：