vue3 jsx/tsx
Agwenbi 人气:0安装@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> </> ); } })
加载全部内容