vue3在jsx中使用component组件方式
作者：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';"
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。