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

所需工具：

JavaScript

聪明的大脑文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

勤劳的双手文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

 文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

注意：本站只提供教程，不提供任何成品+工具+软件链接，仅限用于学习和研究，禁止商业用途，未经允许禁止转载/分享等文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

 文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

教程如下

安装@vitejs/plugin-vue-jsx

[php]文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

yarn add -D @vitejs/plugin-vue-jsx
npm i -D @vitejs/plugin-vue-jsx文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

[/php]文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

配置vite.config.js

[php]文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

...
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vueJsx(), ...],
...
})文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12256.html

[/php]

使用实战

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

第一种写法使用this

使用了this，个人不太推荐

[php]

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>
</>
);
}
})

[/php]

第二种写法

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

[php]

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;
})

[/php]

第三种写法

比较推荐这种写法

[php]

import { defineComponent, ref } from 'vue';
export default defineComponent({
props: {
params: {
type: Object,
default: () => {}
}
},
setup(props){
const str = ref&amp;lt;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>
</>
);
}
})

[/php]