vue3 如何在 jsx中使用 component 组件

​​component​​​ 组件不像其它的内置组件(​​tansition​​​、​​transitionGroup​​​),可以直接从 ​​vue​​​ 中直接导出，所有要在 ​​jsx​​​ 使用​​component​​​就要使用 ​​h​​ 函数

使用 vue 内置组件

// xxx.jsx
import { defineComponent, Transition } from 'vue';

export default defineComponent({
    name: "v-test",
    setup(props, { attrs, slots }){
        return () => <Transition><div>{ slots.default?.() }</div></Transition>
    }
})

使用动态组件-component

// xxx.jsx
import { defineComponent } from 'vue';

export default defineComponent({
    name: "v-test",
    props:{
        tag: {
            type: String,
            default: "div",
        }
    },
    setup(props, { attrs, slots }){
        return () => h(props.tag, {...attrs}, slots.default?.())
    }
})