TSX常見簡單入門用法之Vue3+Vite
更新時間：2022年08月19日 09:11:19 作者：?kid
Vue3的確可以直接使用tsx開發(fā),唯一需要處理的就是children,而且處理起來還是比較不爽的,下面這篇文章主要給大家介紹了關(guān)于TSX常見簡單入門用法之Vue3+Vite的相關(guān)資料,需要的朋友可以參考下
1.安裝tsx
1.安裝tsx插件
npm install @vitejs/plugin-vue-jsx -D
2.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()],
})3.tsconfig.json里的配置
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"skipLibCheck": true,
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}這三條為配置項
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",2.使用TSX
1.app.vue里的代碼
<template>
<renderDom title="我是標題" @on-click="getNum"></renderDom>
</template>
<script setup lang="ts">
import renderDom from "./App";
import { provide, ref } from "vue";
const data = ref(false);
provide("flag", data);
const getNum = (num: number) => {
console.log("我接受到了", num);
};
</script>
<style>
</style>2.app.tsx的代碼
import { ref } from "vue";
let v = ref<string>("");
let flag = ref(false);
let arr = ref([0, 1, 2, 3, 4, 5]);
// tsx不會自動結(jié)構(gòu)所以該用.value還是要使用
type Props = {
title: string;
};
const renderDom = (props: Props, ctx: any) => {
return (
<div>
<button onClick={clickEmit.bind(this,ctx)}>點擊emit</button>
<h1>{props.title}</h1>
<div>
<input v-model={v.value} type="text" />
<div>
<h1>{v.value}</h1>
</div>
</div>
<div>
<div v-show={flag.value}>正確的</div>
<div v-show={!flag.value}>錯誤的</div>
</div>
{/* <div>
<div v-if={flag.value}>正確的</div>
<div v-if={!flag.value}>錯誤的</div>
</div> */}
{/* 不支持v-if 可用三元表達式去代替 */}
<div>{flag.value ? <div>正確的</div> : <div>錯誤的</div>}</div>
{/* 不支持v-for 但可以用map循環(huán)去代替 */}
{/*不支持v-bind，可以直接綁定數(shù)值 */}
<div>
{arr.value.map((item, i: any) => {
return (
<div data-inext={i} onClick={clickIndex.bind(this, i)}>
{item}
</div>
);
})}
</div>
</div>
);
};
const clickIndex = (i: any) => {
alert(i);
};
const clickEmit=(ctx:any)=>{
ctx.emit('on-click',123)
}
export default renderDom;注意:
1.tsx里面寫的標簽內(nèi)容是不會自動解構(gòu)的，所以ref里面的.value還是要加上值才會出來2.tsx里面支持v-show,v-model,但不支持v-bind,v-for,v-if，所以再寫這些的時候要更改寫法
v-if使用三元表達式
<div>{flag.value ? <div>正確的</div> : <div>錯誤的</div>}</div>v-for通過map函數(shù)遍歷數(shù)組來實現(xiàn)
<div>
{arr.value.map((item, i: any) => {
return (
<div data-inext={i} onClick={clickIndex.bind(this, i)}>
{item}
</div>
);
})}
</div>v-bind可以直接綁值
<div data-inext={i} onClick={clickIndex.bind(this, i)}>props和emit使用
1.props
<renderDom title="我是標題" @on-click="getNum"></renderDom>
（app.vue里傳值title）
type Props = {
title: string;
};
const renderDom = (props: Props, ctx: any) （renderDom里面接收后可以使用，和以前一樣）
2.emit
const renderDom = (props: Props, ctx: any)
(拿到上下文)
<button onClick={clickEmit.bind(this,ctx)}>點擊emit</button>(綁定方法)
const clickEmit=(ctx:any)=>{
ctx.emit('on-click',123)
}(通過emit傳值)
（以上為app.tsx文件里面）
<renderDom title="我是標題" @on-click="getNum"></renderDom>
(綁定自定義事件)
const getNum = (num: number) => {
console.log("我收到了", num);
};(拿到值去使用)
(以上為父組件收到并使用)
總結(jié)
到此這篇關(guān)于TSX常見簡單入門用法之Vue3+Vite的文章就介紹到這了,更多相關(guān)TSX常見用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue實現(xiàn)數(shù)據(jù)導(dǎo)入的四種方法(resource、Axios、Fetch、Excel導(dǎo)入)
本文主要介紹了Vue實現(xiàn)數(shù)據(jù)導(dǎo)入的四種方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了vue+swiper實現(xiàn)左右滑動的測試題功能,本文通過實例代碼給大介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
在前端開發(fā)中,當用戶頻繁連續(xù)點擊按鈕,可能會導(dǎo)致頻繁的請求或者觸發(fā)過多的操作,本文主要介紹了vue3按鈕點擊頻率控制的實現(xiàn)示例,感興趣的可以了解一下2024-01-01
這篇文章主要給大家介紹了關(guān)于vuex使用方法的相關(guān)資料,主要內(nèi)容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下2024-10-10
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
vue-cli3.0移除了配置文件目錄： config和build文件夾?？梢哉f是非常的精簡了，那移除了配置文件目錄后如何自定義配置環(huán)境變量和模式呢?這篇文章主要介紹了vue-cli3.0 環(huán)境變量與模式 ,需要的朋友可以參考下2018-11-11
使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue組件傳值的實現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue組件傳值的實現(xiàn)方式,結(jié)合實例形式總結(jié)分析了vue.js組建傳值的三種實現(xiàn)方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下2020-02-02