這篇文章主要介紹“vue3中怎么使用jsx/tsx”，在日常操作中，相信很多人在vue3中怎么使用jsx/tsx問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3中怎么使用jsx/tsx”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計制作、做網(wǎng)站網(wǎng)站策劃，項目實(shí)施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元三門做網(wǎng)站,已為上家服務(wù),為三門各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

安裝插件（@vitejs/plugin-vue-jsx）

vite官方提供了官方的插件來支持在vue3中使用jsx/tsx，直接安裝就行。

yarn add @vitejs/plugin-vue-jsx -D

安裝完之后在vite.config.ts中插入一下代碼

import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vueJsx(),
  ]
})

配置完就可以在項目中使用jsx/tsx啦

1、插值

jsx/tsx 的插值與 vue 模板語法中的插值一樣，支持有效的 Javascript表達(dá)式，比如：a + b, a || 5...

只不過在 jsx/tsx中 由雙大括號{{}} 變?yōu)榱藛未罄ㄌ?code>{}

// vue3模板語法{{ a + b }}// jsx/tsx{ a + b }

2、class與style 綁定

class類名綁定有兩種方式，使用模板字符串或者使用數(shù)組。

• 使用模板字符串兩個類名之間使用空格隔開

// 模板字符串header//數(shù)組header

style綁定需要使用 雙大括號

const color = 'red'
const element =style

3、條件渲染

• jsx/tsx中只保留了 v-show指令，沒有 v-if指令

• 使用 if/else和三目表達(dá)式都可以實(shí)現(xiàn)

   setup() {
       const isShow = false
       const element = () => {
           if (isShow) {
               return 我是if   } else {
               return 我是else   }
       }
       return () => (我是v-show   {
                   element()
               }
               {
                   isShow ?我是三目1:我是三目2})
   }

4、列表渲染

同樣，jsx/tsx 中也沒有 v-for指令，需要渲染列表我們只需要使用Js 的數(shù)組方法 map 就可以了

setup() {
   const listData = [
       {name: 'Tom', age: 18},
       {name: 'Jim', age: 20},
       {name: 'Lucy', age: 16}
   ]
   return () => (姓名   年齡   {
               prop.listData.map(item => {
                   return{item.name}   {item.age}   })
           })
}

5、事件處理

• 綁定事件使用的也是 單大括號 {}，不過事件綁定不是以 @為前綴了，而是改成了 on，例如：click 事件是 onClick

• 如果需要使用事件修飾符，就需要借助withModifiers方法啦，withModifiers 方法接收兩個參數(shù)，第一個參數(shù)是綁定的事件，第二個參數(shù)是需要使用的事件修飾符

setup() {
    const clickBox = val => {
        console.log(val)
    }
    return () => (clickBox('box1')}>我是box1clickBox('box2')}>我是box2clickBox('box3'), ['stop'])}>我是box3)
}

6、v-model

jsx/tsx是支持v-model語法的

// 正常寫法// vue// jsx

// 指定綁定值寫法// vue// jsx

// 修飾符寫法// vue// jsx

7、slot插槽

定義插槽

jsx/tsx中是沒有 slot 標(biāo)簽的，定義插槽需要使用{}或者使用renderSlot函數(shù)

setup 函數(shù)默認(rèn)接收兩個參數(shù) 1. props 2. ctx 上下文 其中包含 slots、attrs、emit 等

import { renderSlot } from "vue"
export default defineComponent({
    // 從ctx中解構(gòu)出來 slots
    setup(props, { slots }) {
        return () => ({ renderSlot(slots, 'default') }
                { slots.title?.() })
    }
})

使用插槽

可以通過 v-slots 來使用插槽

import Vslot from './slotTem'
export default defineComponent({
    setup() {
        return () => ({
                        return我是title插槽},
                    default: () => {
                        return我是default插槽}
                }} />)
    }
})

8、使用 tsx 實(shí)現(xiàn)遞歸組件-菜單

主要功能就是根據(jù)路由信息自動取生成菜單

效果如下

代碼如下，如果需要控制權(quán)限啥的，自己在路由信息的meta中添加對應(yīng)的參數(shù)，然后在menuItem中自行控制

// index.tsx

import { routes } from '@/router/index'
import MenuItem from './menuItem'
import './index.scss'

export default defineComponent({
    setup() {
        const isShowRoutes = computed(() => {
            return routes
        })
        const currentPath = computed(() => {
            return useRoute().path
        })

        return () => ({
                        isShowRoutes.value.map((route) => {
                            return})
                    })
    }
})

// menuItem.tsx

import { defineComponent, PropType } from 'vue'
import { RouteRecordRaw } from 'vue-router'
import './index.scss'

const MenuItem = defineComponent({
    name: 'MenuItem',
    props: {
        item: {
            type: Object as PropType,
            required: true
        }
    },
    setup(props: { item: any }) {
        const router = useRouter()
        const jumpRoute = (path: string) => {
            router.push(path)
        }
        return () => {
            let { item } = props
            if (item.children) {
                const slots = {
                    title: () => {
                        return{item.meta.title}}
                }
                return{item.children.map((child: RouteRecordRaw) => {
                        return})}} else {
                returnjumpRoute(item.path)}>{item.meta.title}}
        }
    }
})

export default MenuItem

到此，關(guān)于“vue3中怎么使用jsx/tsx”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前文章：vue3中怎么使用jsx/tsx
分享網(wǎng)址：http://aaarwkj.com/article12/gopodc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、企業(yè)建站、搜索引擎優(yōu)化、虛擬主機(jī)、建站公司、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)