vue3在jsx中使用component組件方式
更新時間：2023年10月09日 17:29:29 作者：fly丶知秋
這篇文章主要介紹了vue3在jsx中使用component組件方式,具有很好的 參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3在jsx使用component組件
component 組件不像其它的內(nèi)置組件( tansition 、 transitionGroup )
可以直接從 vue 中直接導(dǎo)出，所有要在 jsx 使用 component 就要使用 h 函數(shù)
使用vue內(nèi)置組件
// xxx.jsx
import { defineComponent, Transition } from 'vue';
export default defineComponent({
name: "v-test",
setup(props, { attrs, slots }){
return () => <Transition><div>{ slots.default?.() }</div></Transition>
}
})使用動態(tài)組件-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
解決方案
此時還需要設(shè)置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';"
},
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章介紹了如何在Vue3和Beego中配置跨域請求,在Beego的router.go文件的init函數(shù)中添加option函數(shù)來回應(yīng)預(yù)檢請求,以支持跨域請求,這是個人經(jīng)驗分享,希望能幫助到大家2025-01-01
vue項目環(huán)境搭建?啟動?移植操作示例及目錄結(jié)構(gòu)分析
這篇文章主要介紹了vue項目環(huán)境搭建、啟動、項目移植、項目目錄結(jié)構(gòu)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
vuex+axios+element-ui實現(xiàn)頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實現(xiàn)頁面請求loading操作,結(jié)合實例形式分析了vuex+axios+element-ui實現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-02-02
Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)
vue中對數(shù)組的元素進行刪除,以前一直以為這個方法是vue中特有的,后來百度之后才知道原來是js的一個寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)方法,需要的朋友可以參考下2023-05-05
vue插件--仿微信小程序showModel實現(xiàn)模態(tài)提示窗功能
這篇文章主要介紹了vue插件--仿微信小程序showModel實現(xiàn)模態(tài)提示窗,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
Vue開發(fā)模式是一種基于Vue.js框架的開發(fā)方式,它可以幫助開發(fā)者更高效地構(gòu)建和維護復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開發(fā)模式提示的簡單解決辦法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue項目中如何添加枚舉，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)改變css樣式的3種方法,在Vue.js中我們經(jīng)常需要根據(jù)特定的條件或事件來動態(tài)地修改CSS樣式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
vue3?Error:Unknown?variable?dynamic?import:?../views/的解
這篇文章主要給大家介紹了關(guān)于vue3?Error:Unknown?variable?dynamic?import:?../views/的解決方案,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
使用Vue與WebSocket創(chuàng)建實時通知系統(tǒng)
在現(xiàn)代應(yīng)用開發(fā)中,實時性已成為用戶體驗的一個重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構(gòu)建實時通知系統(tǒng),在本文中,我們將通過一個簡單的示例,使用 Vue 3 的 Composition API（setup 語法糖）來創(chuàng)建一個實時通知系統(tǒng)2024-11-11