vue3 如何在 jsx中使用 component 组件

最新推荐文章于 2025-05-10 15:18:30 发布

fly丶知秋

最新推荐文章于 2025-05-10 15:18:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 jsx

本文链接：https://blog.csdn.net/u014752296/article/details/128643215

vue 专栏收录该内容

18 篇文章

订阅专栏

文章讲述了在Vue的JSX语法中，如何使用内置组件如Transition，以及如何通过h函数来创建和使用动态组件。对于Transition组件的使用，可以直接导入并应用。而对于component组件，由于它不是内置导出的，所以需要借助h函数来创建。props和slots在构建组件时起到了传递属性和内容的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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?.())
    }
})