vue3在jsx中使用component组件方式

更新时间：2023年10月09日 17:29:29 作者：fly丶知秋

这篇文章主要介绍了vue3在jsx中使用component组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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

vue3使用jsx报错React is not defined

项目场景

vue3+vite项目

问题描述

在vue3中使用jsx报错React is not defined

解决方案

此时还需要设置tsconfig.ts中配置"jsx": "preserve"属性。

方式一：

npm install @vitejs/plugin-vue-jsx -D
// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ]
}

方式二：

在vite.config.vue中添加如下代码：

 esbuild: {
    jsxFactory: 'h',
     jsxFragment: 'Fragment',
     jsxInject: "import { h } from 'vue';"
   },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3和beego跨域请求配置方式
文章介绍了如何在Vue3和Beego中配置跨域请求,在Beego的router.go文件的init函数中添加option函数来回应预检请求,以支持跨域请求,这是个人经验分享,希望能帮助到大家
2025-01-01
vue项目环境搭建启动移植操作示例及目录结构分析
这篇文章主要介绍了vue项目环境搭建、启动、项目移植、项目目录结构分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
2022-04-04
vuex+axios+element-ui实现页面请求loading操作示例
这篇文章主要介绍了vuex+axios+element-ui实现页面请求loading操作,结合实例形式分析了vuex+axios+element-ui实现页面请求过程中loading遮罩层相关操作技巧与使用注意事项,需要的朋友可以参考下
2020-02-02
Vue中splice()方法对数组进行增删改等操作的实现
vue中对数组的元素进行删除,以前一直以为这个方法是vue中特有的,后来百度之后才知道原来是js的一个写法,下面这篇文章主要给大家介绍了关于Vue中splice()方法对数组进行增删改等操作的实现方法,需要的朋友可以参考下
2023-05-05
vue插件--仿微信小程序showModel实现模态提示窗功能
这篇文章主要介绍了vue插件--仿微信小程序showModel实现模态提示窗,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
vue关闭开发模式提示的简单解决办法
Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下
2024-04-04
vue项目中如何添加枚举
这篇文章主要介绍了vue项目中如何添加枚举，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue动态改变css样式的3种方法总结
这篇文章主要给大家介绍了关于Vue动态改变css样式的3种方法,在Vue.js中我们经常需要根据特定的条件或事件来动态地修改CSS样式,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
vue3 Error:Unknown variable dynamic import: ../views/的解
这篇文章主要给大家介绍了关于vue3 Error:Unknown variable dynamic import: ../views/的解决方案,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
使用Vue与WebSocket创建实时通知系统
在现代应用开发中,实时性已成为用户体验的一个重要组成部分,ue 作为一款流行的前端框架,配合 WebSocket,可以轻松构建实时通知系统,在本文中,我们将通过一个简单的示例,使用 Vue 3 的 Composition API（setup 语法糖）来创建一个实时通知系统
2024-11-11