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源码中要const _toStr = Object.prototype.toString的原因分析
这篇文章主要介绍了Vue源码中要const _toStr = Object.prototype.toString的原因分析,在文中给大家提到了Object.prototype.toString方法的原理,需要的朋友可以参考下2018-12-12Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
这篇文章主要介绍了Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面),本文通过实例代码文字说明给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
最新评论