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

2023-12-14 18:08:33

背景，在写自定义指令的时候遇见，需要把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)

效果：

文章来源:https://blog.csdn.net/csl125/article/details/134999225
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。