vue3+vite使用jsx和tsx详情
更新时间：2022年05月31日 09:03:34 作者：Agwenbi
这篇文章主要介绍了vue3+vite使用jsx和tsx详情，文章通过安装@vitejs/plugin-vue-jsx展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
安装@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>
</>
);
}
})到此这篇关于vue3+vite使用jsx和tsx详情的文章就介绍到这了,更多相关vue3 jsx/tsx内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇Vue刷新修改页面中数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3 hook自动导入的原理,介绍了API的自动导入及组件的自动导入，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
element表单el-form的label自适应宽度的实现
本文主要介绍了element表单el-form的label自适应宽度的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue.js系列之项目结构说明(2)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-01-01
vue和react等项目中更简单的实现展开收起更多等效果示例
这篇文章主要介绍了vue和react等项目中更简单的实现展开收起更多等效果示例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
这篇文章主要介绍了Vue2的路由和异步请求方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章给大家介绍了Vue3快速实现文件上传OSS的方法,上传文件可以说是经典的需求了,在后台管理项目中随处可见,一般是由前端进行文件上传,然后再由后端去处理,本文旨在实现上传功能,不考虑额外的功能（如文件尺寸限制）,感兴趣的朋友可以参考下2024-01-01
这篇文章主要介绍了vue请求后端数据和跨域问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
本篇文章主要介绍了五分钟搞懂Vuex实用知识，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
本文主要介绍了django+vue项目搭建实现前后端通信，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
最新评论