vue3在jsx中使用component組件方式

更新時(shí)間：2023年10月09日 17:29:29 作者：fly丶知秋

這篇文章主要介紹了vue3在jsx中使用component組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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>
    }
})

使用動(dòng)態(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報(bào)錯(cuò)React is not defined

項(xiàng)目場(chǎng)景

vue3+vite項(xiàng)目

問題描述

在vue3中使用jsx報(bào)錯(cuò)React is not defined

解決方案

此時(shí)還需要設(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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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