vue3使用jsx变量接受组件的问题

最近使用vue3中的jsx写组件，发现使用全局组件不解析的情况。在这里我的element plus是全局引入，所以属于全局组件。

export default defineComponent({
    props:{
        parentValue:{
            default:()=>{}
        }
    },
    setup(){
        const childrenHtml=ref('');
        watch(()=>props.parentValue,(newVal){
            if(newVal){
               childrenHtml.value=makeHtml(newVal)
            }
        })
        const makeHtml=(val)=>{
            return (
                <div>
                    <el-button>按钮</el-button>
                </div>
            )
        }
        const render=()=>{
            return (
                <>
                   <h1>标题</h1>
                    {childrenHtml.value}
                </>
            )
        }
        return render;
    }
})

以上代码结果就是el-button只是普通元素，并没有解析成组件。如果把el-button换成局部组件，这里就可以解析。

正确的写法就是不要用变量接受组件再去渲染，就算是用变量里面也不要用全局组件

export default defineComponent({
    props:{
        parentValue:{
            default:()=>{}
        }
    },
    setup(){
        const childrenHtml=ref('');
        watch(()=>props.parentValue,(newVal){
            if(newVal){
               childrenHtml.value=newVal
            }
        })
        const makeHtml=(val)=>{
            return (
                <div>
                    <el-button>按钮</el-button>
                </div>
            )
        }
        const render=()=>{
            return (
                <>
                   <h1>标题</h1>
                   {makeHtml(childrenHtml.value)}
                </>
            )
        }
        return render;
    }
})

这样就可以了！