vue3 如何在 jsx中使用 component 组件

原创
2023/09/25 17:03
阅读数 58

component 组件不像其它的内置组件(tansitiontransitionGroup),可以直接从 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?.())
    }
})
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部