這篇文章主要講解了“vue3.0之怎么寫tsx語法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue3.0之怎么寫tsx語法”吧！

import{defineConfig}from'vite'
importvuefrom'@vitejs/plugin-vue'
importvueJsxfrom'@vitejs/plugin-vue-jsx';

//https://vitejs.dev/config/
exportdefaultdefineConfig({
plugins:[vue(),vueJsx()]
})

02：tsconfig.json 配置文件

"jsx":"preserve",
"jsxFactory":"h",
"jsxFragmentFactory":"Fragment",

經過上述的配置就可以使用 ts了

測試tsx 新建一個App.tsx頁面

再App.vue文件之中引入使用

<template>
<!--<Layout></Layout>-->
<renderDom/>
</template>

<scriptsetuplang="ts">
//importLayoutfrom'./layout/Layout.vue'
importrenderDomfrom'./App.tsx'
</script>
<stylelang="scss">
html,
body,
#app{
height:100%;
width:100%;
overflow:hidden;
}
</style>

tsx使用v-model指令 (App.tsx組件)

import{ref}from"vue"
lettest=ref<string>("")
constrenderDom=()=>{
//注意點：在tsx之中不會自動讀寫X.value
return(
<div>
<inputtype="text"v-model={test.value}/>
<div>我是{test.value}</div>
</div>

)
}
exportdefaultrenderDom

效果

使用v-show、與三目運算符

• tsx是支持v-show指令

• tsx不支持v-if、v-else指令，這時候需要使用到三目運算符了

import{ref}from"vue"

letflag=ref<Boolean>(true)
constrenderDom=()=>{
//注意點：在tsx之中不會自動讀寫X.value
return(
<div>
<divv-show={flag}>我是true</div>
<divv-show={!flag}>我是flase</div>
<div>
{
flag?<div>我是true</div>:<div>我是flase</div>
}
</div>
</div>

)
}

exportdefaultrenderDom

效果

tsx之數組的遍歷(map)

• tsx是不支持 v-for指令的

• 使用map的方式去遍歷數組，然后map函數之中返回一個 div等標簽渲染dom節點

import{reactive,ref}from"vue"

letarr=reactive<Number[]>([1,2,3])
constrenderDom=()=>{
return(
<div>
<div>
{
arr.map((item,idx)=>{
return(
<divkey={idx}>{item}</div>
)
})
}
</div>
</div>

)
}
exportdefaultrenderDom

效果

自定義屬性 data-index

給當前標簽自定義屬性用于數據的傳遞

import{reactive,ref}from"vue"

letarr=reactive<Number[]>([1,2,3])
constrenderDom=()=>{
return(
<div>
<div>
{
arr.map((item,idx)=>{
return(
<divkey={idx}data-index={idx}>{item}</div>
)
})
}
</div>
</div>

)
}

exportdefaultrenderDom

效果

tsx綁定事件

使用onClick定義事件

• 不傳遞參數的時候，直接定義這個click事件即可

• 若是傳遞參數的時候，需要使用bind來改變this的指向，并且不自覺調用函數，而是返回一個新的函數，可以傳遞參數，等待點擊的時候觸發事件

import{reactive,ref}from"vue"

letarr=reactive<Number[]>([1,2,3])
constrenderDom=()=>{
return(
<div>
<div>
{
arr.map((item,idx)=>{
return(
//<divkey={idx}data-index={idx}onClick={TestClick}>{item}</div>//沒有傳參
//<divkey={idx}data-index={idx}onClick={TestClick()}>{item}</div>//直接調用
<divkey={idx}data-index={idx}onClick={TestClick.bind(this,item)}>{item}</div>
)
})
}
</div>
</div>

)
}
constTestClick=(item)=>{
console.log("111",item);

}

exportdefaultrenderDom

tsx之 props父組件向子組件傳遞參數

App.vue 父

再vue之中，使用 v-bind的形式傳遞數據

<template>
<renderDom:title="title"/>
</template>

<scriptsetuplang="ts">
import{ref}from'vue'
importrenderDomfrom'./App.tsx'
lettitle=ref<String>('我是測試的t')
</script>

App.tsx 子

import{reactive,ref}from"vue"

typeProps={
title:string
}
constrenderDom=(props:Props)=>{
return(
<div>
<div>我是title-{props.title}</div>
</div>

)
}
exportdefaultrenderDom

效果

tsx之子組件 向父組件 傳遞數據

點擊11 傳遞當前11數據

子組件 App.tsx

import{reactive,ref}from"vue"

typeProps={
title:string
}
letarr=reactive<number[]>([11,22,33])
//props是接受父組件傳遞來的值，ctx：為上下文對象
constrenderDom=(props:Props,ctx:any)=>{
return(
<div>
<div>我是title-{props.title}</div>
<div>
{
arr.map((item,idx)=>{
return(
<divonClick={itemClick.bind(this,ctx,item)}>{item}</div>
)
})
}
</div>
</div>

)
}
//點擊事件
constitemClick=(ctx:any,item:any)=>{
ctx.emit("on-click",item)//使用ctx之中的emit發射事件，給父組件傳遞數據
}

exportdefaultrenderDom

App.vue 父

<template>
<!--<Layout></Layout>-->
<renderDom:title="title"@on-click="getData"/>
</template>

<scriptsetuplang="ts">
//importLayoutfrom'./layout/Layout.vue'
import{ref}from'vue'
importrenderDomfrom'./App.tsx'
lettitle=ref<String>('我是測試的t')
//接受子組件自定義事件傳遞來的數據
constgetData=(parmas)=>{
console.log('getData',parmas)
}
</script>

總結

以上是生活随笔為你收集整理的vue3.0之怎么写tsx语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。