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(), ...],
? ...
})

使用實戰(zhàn)

新建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('沒有參數(shù)');
? ? }
? ? const clickFunc2 = (msg: string = '默認值') => {
? ? ? console.log(msg);
? ? }
? ? return {
? ? ? str,
? ? ? clickFunc1,
? ? ? clickFunc2
? ? };
? },
? render(){
? ? return (
? ? ? <>
? ? ? ? <div class='async'>{this.str}</div>
? ? ? ? <button onClick={this.clickFunc1}>不傳參數(shù)點擊</button>
? ? ? ? <button onClick={() => this.clickFunc2('額外參數(shù)')}>傳參數(shù)點擊</button>
? ? ? </>
? ? );
? }
})

第二種寫法

函數(shù)體等價于setup，此方式無法獲取到props與emits等等(可能我沒有了解到)，存在交互性強的也不建議使用，否則可以考慮

import { defineComponent, ref } from 'vue';
export default defineComponent(() => {
? const str = ref<string>('tsx的使用');
? const clickFunc1 = () => {
? ? console.log('沒有參數(shù)');
? }
? const clickFunc2 = (msg: string = '默認值') => {
? ? console.log(msg);
? }
? const render = (
? ? <>
? ? ? <div class='async'>{str.value}</div>
? ? ? <button onClick={clickFunc1}>不傳參數(shù)點擊</button>
? ? ? <button onClick={() => clickFunc2('額外參數(shù)')}>傳參數(shù)點擊</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('沒有參數(shù)');
? ? }
? ? const clickFunc2 = (msg: string = '默認值') => {
? ? ? console.log(msg);
? ? ? console.log(props);
? ? }
? ? return () => (
? ? ? <>
? ? ? ? <div class='async'>{str.value}</div>
? ? ? ? <button onClick={clickFunc1}>不傳參數(shù)點擊</button>
? ? ? ? <button onClick={() => clickFunc2('額外參數(shù)')}>傳參數(shù)點擊</button>
? ? ? </>
? ? );
? }
})

到此這篇關于vue3+vite使用jsx和tsx詳情的文章就介紹到這了,更多相關vue3 jsx/tsx內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: