TSX常見簡單入門用法之Vue3+Vite
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不會自動結構所以該用.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循環去代替 */} {/*不支持v-bind,可以直接綁定數值 */} <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裡面寫的標簽內容是不會自動解構的,所以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函數遍歷數組來實現
<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); };
(拿到值去使用)
(以上為父組件收到並使用)
總結
到此這篇關於TSX常見簡單入門用法之Vue3+Vite的文章就介紹到這瞭,更多相關TSX常見用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!