【JavaScript教程】vue3+vite如何使用jsx和tsx详情

所需工具：

JavaScript

聪明的大脑

勤劳的双手

注意：本站只提供教程，不提供任何成品+工具+软件链接，仅限用于学习和研究，禁止商业用途，未经允许禁止转载/分享等

教程如下

安装@vitejs/plugin-vue-jsx

 	yarn add -D @vitejs/plugin-vue-jsx
 	npm i -D @vitejs/plugin-vue-jsx

配置vite.config.js

 	...
 	import vueJsx from '@vitejs/plugin-vue-jsx';
 	export default defineConfig({
 	     plugins: [vueJsx(), ...],
 	     ...
 	})

使用实战

新建xxx.tsx或者xxx.jsx，注意不再是vue为后缀

第一种写法使用this

使用了this，个人不太推荐

 	import { defineComponent, ref } from 'vue';
 	export default defineComponent({
 	     setup(){
 	     const str = ref<string>('tsx的使用');
 	     const clickFunc1 = () => {
 	     console.log('没有参数');
 	     }
 	     const clickFunc2 = (msg: string = '默认值') => {
 	     console.log(msg);
 	     }
 	     return {
 	     str,
 	     clickFunc1,
 	     clickFunc2
 	     };
 	     },
 	     render(){
 	     return (
 	     <>
 	     <div class='async'>{this.str}</div>
 	     <button onClick={this.clickFunc1}>不传参数点击</button>
 	     <button onClick={() => this.clickFunc2('额外参数')}>传参数点击</button>
 	     </>
 	     );
 	     }
 	})

第二种写法

函数体等价于setup，此方式无法获取到props与emits等等(可能我没有了解到)，存在交互性强的也不建议使用，否则可以考虑

 	import { defineComponent, ref } from 'vue';
 	export default defineComponent(() => {
 	     const str = ref<string>('tsx的使用');
 	     const clickFunc1 = () => {
 	     console.log('没有参数');
 	     }
 	     const clickFunc2 = (msg: string = '默认值') => {
 	     console.log(msg);
 	     }
 	     const render = (
 	     <>
 	     <div class='async'>{str.value}</div>
 	     <button onClick={clickFunc1}>不传参数点击</button>
 	     <button onClick={() => clickFunc2('额外参数')}>传参数点击</button>
 	     </>
 	     );
 	     return () => render;
 	})
 	 

第三种写法

比较推荐这种写法

 	import { defineComponent, ref } from 'vue';
 	export default defineComponent({
 	     props: {
 	     params: {
 	     type: Object,
 	     default: () => {}
 	     }
 	     },
 	     setup(props){
 	     const str = ref<string>('tsx的使用');
 	     const clickFunc1 = () => {
 	     console.log('没有参数');
 	     }
 	     const clickFunc2 = (msg: string = '默认值') => {
 	     console.log(msg);
 	     console.log(props);
 	     }
 	     return () => (
 	     <>
 	     <div class='async'>{str.value}</div>
 	     <button onClick={clickFunc1}>不传参数点击</button>
 	     <button onClick={() => clickFunc2('额外参数')}>传参数点击</button>
 	     </>
 	     );
 	     }
 	})