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';"
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
这篇文章主要介绍了Vue axios全局拦截 get请求、post请求、配置请求的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue在自定义指令绑定的处理函数中传递参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了详解vue-cli项目中的proxyTable跨域问题小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
这篇文章主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
文章介绍了如何在uni-app中简单封装一个无限级树形组件,该组件可以无线嵌套,展开和收缩,并获取子节点数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-01-01
本文主要介绍了Vue3实现简约型侧边栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
文章介绍了如何去掉Element UI中el-table组件自带的边框线,通常情况下,el-table没有添加border属性,但仍然会出现边框线,可能的原因包括ElementUI的默认样式或表格的某些内置样式,感兴趣的朋友跟随小编一起看看吧2025-01-01
使用live-server快速搭建本地服务器+自动刷新的方法
下面小编就为大家分享一篇使用live-server快速搭建本地服务器+自动刷新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在Vue3项目中实现页面截图的功能,可以通过使用js-web-screen-shot组件来实现,本文以toolbox.js作为案例,详细介绍了如何在Vue3框架下,利用js-web-screen-shot组件实现页面截图的具体步骤和方法,这一技术的应用,不仅可以提高用户体验,还能在需要时方便地获取页面的即时信息2024-10-10
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章主要给大家介绍了关于Vue新手指南之创建第一个vue-cli程序的相关资料,需要的朋友可以参考下2021-05-05
最新评论