vue3+vite使用jsx和tsx詳情
更新時(shí)間：2022年05月31日 09:03:34 作者：Agwenbi
這篇文章主要介紹了vue3+vite使用jsx和tsx詳情，文章通過(guò)安裝@vitejs/plugin-vue-jsx展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
安裝@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(), ...],
? ...
})使用實(shí)戰(zhàn)
新建xxx.tsx或者xxx.jsx，注意不再是vue為后綴
第一種寫(xiě)法使用this
使用了this，個(gè)人不太推薦
import { defineComponent, ref } from 'vue';
export default defineComponent({
? setup(){
? ? const str = ref<string>('tsx的使用');
? ? const clickFunc1 = () => {
? ? ? console.log('沒(méi)有參數(shù)');
? ? }
? ? const clickFunc2 = (msg: string = '默認(rèn)值') => {
? ? ? console.log(msg);
? ? }
? ? return {
? ? ? str,
? ? ? clickFunc1,
? ? ? clickFunc2
? ? };
? },
? render(){
? ? return (
? ? ? <>
? ? ? ? <div class='async'>{this.str}</div>
? ? ? ? <button onClick={this.clickFunc1}>不傳參數(shù)點(diǎn)擊</button>
? ? ? ? <button onClick={() => this.clickFunc2('額外參數(shù)')}>傳參數(shù)點(diǎn)擊</button>
? ? ? </>
? ? );
? }
})
第二種寫(xiě)法
函數(shù)體等價(jià)于setup，此方式無(wú)法獲取到props與emits等等(可能我沒(méi)有了解到)，存在交互性強(qiáng)的也不建議使用，否則可以考慮
import { defineComponent, ref } from 'vue';
export default defineComponent(() => {
? const str = ref<string>('tsx的使用');
? const clickFunc1 = () => {
? ? console.log('沒(méi)有參數(shù)');
? }
? const clickFunc2 = (msg: string = '默認(rèn)值') => {
? ? console.log(msg);
? }
? const render = (
? ? <>
? ? ? <div class='async'>{str.value}</div>
? ? ? <button onClick={clickFunc1}>不傳參數(shù)點(diǎn)擊</button>
? ? ? <button onClick={() => clickFunc2('額外參數(shù)')}>傳參數(shù)點(diǎn)擊</button>
? ? </>
? );
? return () => render;
})
第三種寫(xiě)法
比較推薦這種寫(xiě)法
import { defineComponent, ref } from 'vue';
export default defineComponent({
? props: {
? ? params: {
? ? ? type: Object,
? ? ? default: () => {}
? ? }
? },
? setup(props){
? ? const str = ref<string>('tsx的使用');
? ? const clickFunc1 = () => {
? ? ? console.log('沒(méi)有參數(shù)');
? ? }
? ? const clickFunc2 = (msg: string = '默認(rèn)值') => {
? ? ? console.log(msg);
? ? ? console.log(props);
? ? }
? ? return () => (
? ? ? <>
? ? ? ? <div class='async'>{str.value}</div>
? ? ? ? <button onClick={clickFunc1}>不傳參數(shù)點(diǎn)擊</button>
? ? ? ? <button onClick={() => clickFunc2('額外參數(shù)')}>傳參數(shù)點(diǎn)擊</button>
? ? ? </>
? ? );
? }
})到此這篇關(guān)于vue3+vite使用jsx和tsx詳情的文章就介紹到這了,更多相關(guān)vue3 jsx/tsx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇Vue刷新修改頁(yè)面中數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue3?hook自動(dòng)導(dǎo)入的原理,介紹了API的自動(dòng)導(dǎo)入及組件的自動(dòng)導(dǎo)入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
element表單el-form的label自適應(yīng)寬度的實(shí)現(xiàn)
本文主要介紹了element表單el-form的label自適應(yīng)寬度的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue.js系列之項(xiàng)目結(jié)構(gòu)說(shuō)明(2)
這篇文章主要介紹了Vue.js系列之項(xiàng)目結(jié)構(gòu)說(shuō)明(2)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-01-01
vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例
這篇文章主要介紹了vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
這篇文章主要介紹了Vue2的路由和異步請(qǐng)求方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue3快速實(shí)現(xiàn)文件上傳OSS的方法詳解
這篇文章給大家介紹了Vue3快速實(shí)現(xiàn)文件上傳OSS的方法,上傳文件可以說(shuō)是經(jīng)典的需求了,在后臺(tái)管理項(xiàng)目中隨處可見(jiàn),一般是由前端進(jìn)行文件上傳,然后再由后端去處理,本文旨在實(shí)現(xiàn)上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下2024-01-01
vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題解決
這篇文章主要介紹了vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
五分鐘搞懂Vuex實(shí)用知識(shí)(小結(jié))
本篇文章主要介紹了五分鐘搞懂Vuex實(shí)用知識(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信
本文主要介紹了django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02