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

項(xiàng)目場景

vue3+vite項(xiàng)目

問題描述

在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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue axios全局?jǐn)r截 get請求、post請求、配置請求的實(shí)例代碼
這篇文章主要介紹了Vue axios全局?jǐn)r截 get請求、post請求、配置請求的實(shí)例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)
這篇文章主要介紹了詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
解決elementUI 切換tab后 el_table 固定列下方多了一條線問題
這篇文章主要介紹了解決elementUI 切換tab后 el_table 固定列下方多了一條線問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
uni-app無限級樹形組件簡單實(shí)現(xiàn)代碼
文章介紹了如何在uni-app中簡單封裝一個無限級樹形組件,該組件可以無線嵌套,展開和收縮,并獲取子節(jié)點(diǎn)數(shù)據(jù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2025-01-01
Vue3實(shí)現(xiàn)簡約型側(cè)邊欄的示例代碼
本文主要介紹了Vue3實(shí)現(xiàn)簡約型側(cè)邊欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
如何去掉el-table中自帶的邊框線
文章介紹了如何去掉Element UI中el-table組件自帶的邊框線,通常情況下,el-table沒有添加border屬性,但仍然會出現(xiàn)邊框線,可能的原因包括ElementUI的默認(rèn)樣式或表格的某些內(nèi)置樣式,感興趣的朋友跟隨小編一起看看吧
2025-01-01
使用live-server快速搭建本地服務(wù)器+自動刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動刷新的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue3實(shí)現(xiàn)頁面截圖功能示例詳解
在Vue3項(xiàng)目中實(shí)現(xiàn)頁面截圖的功能,可以通過使用js-web-screen-shot組件來實(shí)現(xiàn),本文以toolbox.js作為案例,詳細(xì)介紹了如何在Vue3框架下,利用js-web-screen-shot組件實(shí)現(xiàn)頁面截圖的具體步驟和方法,這一技術(shù)的應(yīng)用,不僅可以提高用戶體驗(yàn),還能在需要時方便地獲取頁面的即時信息
2024-10-10
Vue新手指南之創(chuàng)建第一個vue-cli腳手架程序
vue-cli 是一個官方發(fā)布 vue.js 項(xiàng)目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。這篇文章主要給大家介紹了關(guān)于Vue新手指南之創(chuàng)建第一個vue-cli程序的相關(guān)資料,需要的朋友可以參考下
2021-05-05