vue3.0實(shí)踐之寫tsx語(yǔ)法實(shí)例
更新時(shí)間：2022年07月14日 16:56:51 作者：小渣亮
很久不寫博客了,最近在使用ts和tsx開發(fā)vue類項(xiàng)目,網(wǎng)上資料比較少,順便記錄一下方便同樣開發(fā)的人互相學(xué)習(xí)共同進(jìn)步,下面這篇文章主要給大家介紹了關(guān)于vue3.0實(shí)踐之寫tsx語(yǔ)法的相關(guān)資料,需要的朋友可以參考下
- 00：下載
yarn add @vitejs/plugin-vue-jsx -D
- 01：引入
- vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),vueJsx()]
})
02：tsconfig.json 配置文件
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
經(jīng)過上述的配置就可以使用 ts了
測(cè)試tsx 新建一個(gè)App.tsx頁(yè)面
再App.vue文件之中引入使用
<template>
<!-- <Layout></Layout> -->
<renderDom />
</template>
<script setup lang="ts">
// import Layout from './layout/Layout.vue'
import renderDom from './App.tsx'
</script>
<style lang="scss">
html,
body,
#app {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
tsx使用v-model指令 (App.tsx組件)
import { ref } from "vue"
let test = ref<string>("")
const renderDom = () => {
// 注意點(diǎn)：在tsx之中 不會(huì)自動(dòng)讀寫 X.value
return (
<div>
<input type="text" v-model={test.value} />
<div>我是{test.value }</div>
</div>
)
}
export default renderDom
效果
使用v-show、與三目運(yùn)算符
- tsx是支持v-show指令
- tsx不支持v-if、v-else指令，這時(shí)候需要使用到三目運(yùn)算符了
import { ref } from "vue"
let flag = ref<Boolean>(true)
const renderDom = () => {
// 注意點(diǎn)：在tsx之中 不會(huì)自動(dòng)讀寫 X.value
return (
<div>
<div v-show={flag}>我是true</div>
<div v-show={!flag}>我是flase</div>
<div>
{
flag ? <div>我是true</div> : <div>我是flase</div>
}
</div>
</div>
)
}
export default renderDom
效果
tsx之?dāng)?shù)組的遍歷(map)
- tsx是不支持 v-for指令的
- 使用map的方式去遍歷數(shù)組，然后map函數(shù)之中返回一個(gè) div等標(biāo)簽渲染dom節(jié)點(diǎn)
import { reactive, ref } from "vue"
let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (
<div>
<div>
{
arr.map((item,idx)=>{
return(
<div key={idx}>{ item }</div>
)
})
}
</div>
</div>
)
}
export default renderDom
效果
自定義屬性 data-index
給當(dāng)前標(biāo)簽自定義屬性用于數(shù)據(jù)的傳遞
import { reactive, ref } from "vue"
let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (
<div>
<div>
{
arr.map((item,idx)=>{
return(
<div key={idx} data-index={idx}>{ item }</div>
)
})
}
</div>
</div>
)
}
export default renderDom
效果
tsx綁定事件
使用onClick定義事件
- 不傳遞參數(shù)的時(shí)候，直接定義這個(gè)click事件即可
- 若是傳遞參數(shù)的時(shí)候，需要使用bind來改變this的指向，并且不自覺調(diào)用函數(shù)，而是返回一個(gè)新的函數(shù)，可以傳遞參數(shù)，等待點(diǎn)擊的時(shí)候觸發(fā)事件
import { reactive, ref } from "vue"
let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (
<div>
<div>
{
arr.map((item,idx)=>{
return(
// <div key={idx} data-index={idx} onClick={TestClick}>{ item }</div> // 沒有傳參
// <div key={idx} data-index={idx} onClick={TestClick()}>{ item }</div> // 直接調(diào)用
<div key={idx} data-index={idx} onClick={TestClick.bind(this,item)}>{ item }</div>
)
})
}
</div>
</div>
)
}
const TestClick = (item)=>{
console.log("111",item);
}
export default renderDom
tsx之 props父組件向子組件傳遞參數(shù)
App.vue 父
再vue之中，使用 v-bind的形式傳遞數(shù)據(jù)
<template>
<renderDom :title="title" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import renderDom from './App.tsx'
let title = ref<String>('我是測(cè)試的t')
</script>
App.tsx 子
import { reactive, ref } from "vue"
type Props = {
title : string
}
const renderDom = (props:Props) => {
return (
<div>
<div>我是title - { props.title }</div>
</div>
)
}
export default renderDom
效果
tsx之子組件 向父組件 傳遞數(shù)據(jù)
點(diǎn)擊11 傳遞當(dāng)前11數(shù)據(jù)
子組件 App.tsx
import { reactive, ref } from "vue"
type Props = {
title : string
}
let arr = reactive<number[]>([11,22,33])
// props是接受父組件傳遞來的值，ctx：為上下文對(duì)象
const renderDom = (props:Props,ctx:any) => {
return (
<div>
<div>我是title - { props.title }</div>
<div>
{
arr.map((item,idx)=>{
return (
<div onClick={ itemClick.bind(this,ctx,item) }>{ item }</div>
)
})
}
</div>
</div>
)
}
// 點(diǎn)擊事件
const itemClick = (ctx:any,item:any)=>{
ctx.emit("on-click",item) // 使用ctx之中的emit發(fā)射事件，給父組件傳遞數(shù)據(jù)
}
export default renderDom
App.vue 父
<template>
<!-- <Layout></Layout> -->
<renderDom :title="title" @on-click="getData" />
</template>
<script setup lang="ts">
// import Layout from './layout/Layout.vue'
import { ref } from 'vue'
import renderDom from './App.tsx'
let title = ref<String>('我是測(cè)試的t')
// 接受子組件 自定義事件 傳遞來的數(shù)據(jù)
const getData = (parmas) => {
console.log('getData', parmas)
}
</script>
總結(jié)
到此這篇關(guān)于vue3.0實(shí)踐之寫tsx語(yǔ)法的文章就介紹到這了,更多相關(guān)vue3.0寫tsx語(yǔ)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
elementUI多選框反選的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementUI多選框反選的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue-vuex中使用commit提交mutation來修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue 實(shí)例事件,結(jié)合簡(jiǎn)單示例形勢(shì)分析了vue.js事件響應(yīng)與頁(yè)面元素相關(guān)操作技巧,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue中使用rem布局的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue實(shí)現(xiàn)三級(jí)導(dǎo)航展示和隱藏
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)三級(jí)導(dǎo)航展示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要給大家介紹了關(guān)于如何使用寶塔部署Vue項(xiàng)目的相關(guān)資料,寶塔面板提供了非常方便的方式來部署 Vue 項(xiàng)目,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題
這篇文章主要介紹了解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
解決vue-router中的query動(dòng)態(tài)傳參問題
下面小編就為大家分享一篇解決vue-router中的query動(dòng)態(tài)傳參問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
完美解決vue 項(xiàng)目開發(fā)越久 node_modules包越大的問題
這篇文章主要介紹了vue 項(xiàng)目開發(fā)越久 node_modules包越大的問題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06