技术栈
vue3+ts+vite
安装@vitejs/plugin-vue-jsx
1
| npm i @vitejs/plugin-vue-jsx -D
|
使用
vite.config.ts中导入：
1
2
3
4
5
6
7
| import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vue(),vueJsx()]
})
|
修改tsconfig.json:（添加jsxFactory和jsxFragmentFactory）
1
2
3
4
5
6
7
| {
"compilerOptions": {
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
},
}
|
tsx
src目录内新建tsx文件：（如：App.tsx）
1
2
3
4
5
6
7
8
9
| const renderDom = () => {
return (
<div>
hello,tsx!
</div>
)
}
export default renderDom
|
在.vue文件中导入并使用：
1
2
3
4
5
6
7
8
9
10
11
| <template>
<renderDom></renderDom>
</template>
<script setup lang="ts">
import renderDom from "./App.tsx"; //导入后当成组件使用即可
</script>
<style>
</style>
|
展示数据
变量写在单个花括号内，展示ref对象的值需要加上.value
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import {ref, Ref} from "vue";
const text: Ref<string> = ref('')
const renderDom = () => {
return (
<div>
<input type="text" v-model={text.value}/>
<span>{text.value}</span>
</div>
)
}
export default renderDom
|
v-show和v-if
tsx支持v-show，不支持v-if
要想实现v-if的效果，需使用编程的方法
1
2
3
4
5
6
7
8
9
10
11
| let flag = false
const renderDom = () => {
return (
<div>
{ flag ? <div>罗小黑</div> : <div>罗小白</div>}
</div>
)
}
export default renderDom
|
v-for
使用Array.map()
1
2
3
4
5
6
7
8
9
10
11
12
13
| const arr = [1,2,3,4]
const renderDom = () => {
return (
<div>
{ arr.map(item => {
return <div>${item}</div>
}) }
</div>
)
}
export default renderDom
|
v-bind和v-on
tsx不支持v-bind和v-on
绑定数据直接使用即可
绑定事件使用onXXX（如onClick）即可，函数传参使用bind，不能使用事件修饰符（需自己使用js实现）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const arr = [1, 2, 3, 4]
const clickEvent = (item: number) => {
console.log(`点击了第${item}个`)
}
const renderDom = () => {
return (
<div>
{arr.map(item => {
return <div data-num={item} onClick={clickEvent.bind(this, item)}>${item}</div>
})}
</div>
)
}
export default renderDom
|
接收props参数和emit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template>
<renderDom title="这是标题" @getNum="getNum"></renderDom>
</template>
<script setup lang="ts">
import renderDom from "./App.tsx"; //导入后当成组件使用即可
const getNum = (num: number) => {
console.log(num)
}
</script>
<style>
</style>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| interface Props {
title: string
}
const clickEvent = (ctx: any) => {
ctx.emit('getNum', 20)
}
const renderDom = (props: Props, ctx: any) => {
return (
<div>
<div>{props.title}</div>
<button onClick={clickEvent.bind(this,ctx)}>按钮</button>
</div>
)
}
export default renderDom
|
参考视频
