如何在vue3中優(yōu)雅的使用jsx/tsx詳解
更新時(shí)間：2022年10月08日 16:02:05 作者：樹深遇鹿
看了一些 Vue3 的組件庫源碼,發(fā)現(xiàn)無一例外都使用的jsx/tsx來實(shí)現(xiàn),而且實(shí)現(xiàn)方式也各不相同,下面這篇文章主要給大家介紹了關(guān)于如何在vue3中優(yōu)雅的使用jsx/tsx的相關(guān)資料,需要的朋友可以參考下
前言
相信 react 的伙伴對(duì)于 jsx/tsx 都不陌生吧，現(xiàn)在在 vue3 中也可以使用 jsx/tsx 語法拉。
安裝插件（@vitejs/plugin-vue-jsx）
vite官方提供了官方的插件來支持在vue3中使用jsx/tsx，直接安裝就行。
yarn add @vitejs/plugin-vue-jsx -D
安裝完之后在vite.config.ts中插入一下代碼
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
plugins: [
vueJsx(),
]
})配置完就可以在項(xiàng)目中使用jsx/tsx啦
1、插值
jsx/tsx 的插值與 vue 模板語法中的插值一樣，支持有效的 Javascript表達(dá)式，比如：a + b, a || 5...
只不過在 jsx/tsx中 由雙大括號(hào){{}} 變?yōu)榱藛未罄ㄌ?hào){}
// vue3模板語法
<span>{{ a + b }}</span>
// jsx/tsx
<span>{ a + b }</span>2、class與style 綁定
class類名綁定有兩種方式，使用模板字符串或者使用數(shù)組。
- 使用模板字符串兩個(gè)類名之間使用空格隔開
// 模板字符串
<div className={`header ${ isBg ? 'headerBg' : '' }`}>header</div>
//數(shù)組
<div class={ [ 'header', isBg && 'headerBg' ] } >header</div>style綁定需要使用 雙大括號(hào)
const color = 'red'
const element = <sapn style={{ color, fontSize: '16px' }}>style</sapn>3、條件渲染
- jsx/tsx中只保留了
v-show指令，沒有v-if指令 - 使用
if/else和三目表達(dá)式都可以實(shí)現(xiàn)
setup() {
const isShow = false
const element = () => {
if (isShow) {
return <span>我是if</span>
} else {
return <span>我是else</span>
}
}
return () => (
<div>
<span v-show={isShow}>我是v-show</span>
{
element()
}
{
isShow ? <p>我是三目1</p> : <p>我是三目2</p>
}
<div>
)
}4、列表渲染
同樣，jsx/tsx 中也沒有 v-for指令，需要渲染列表我們只需要使用Js 的數(shù)組方法 map 就可以了
setup() {
const listData = [
{name: 'Tom', age: 18},
{name: 'Jim', age: 20},
{name: 'Lucy', age: 16}
]
return () => (
<div>
<div class={'box'}>
<span>姓名</span>
<span>年齡</span>
</div>
{
prop.listData.map(item => {
return <div class={'box'}>
<span>{item.name}</span>
<span>{item.age}</span>
</div>
})
}
</div>
)
}5、事件處理
綁定事件使用的也是 單大括號(hào)
{}，不過事件綁定不是以@為前綴了，而是改成了on，例如：click 事件是onClick如果需要使用事件修飾符，就需要借助
withModifiers方法啦，withModifiers方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是綁定的事件，第二個(gè)參數(shù)是需要使用的事件修飾符
setup() {
const clickBox = val => {
console.log(val)
}
return () => (
<div class={'box1'} onClick={() => clickBox('box1')}>
<span>我是box1</span>
<div class={'box2'} onClick={() => clickBox('box2')}>
<span>我是box2</span>
<div class={'box3'} onClick={withModifiers(() => clickBox('box3'), ['stop'])}>我是box3</div>
</div>
</div>
)
}6、v-model
jsx/tsx是支持v-model語法的
// 正常寫法
<input v-model="value" /> // vue
<input v-model={value} /> // jsx
// 指定綁定值寫法
<input v-model:modelValue="value" /> // vue
<input v-model={[value,'modelValue']} /> // jsx
// 修飾符寫法
<input v-model:modelValue.trim="value" /> // vue
<input v-model={[value,'modelValue',['trim']]} /> // jsx7、slot插槽
定義插槽
jsx/tsx中是沒有 slot 標(biāo)簽的，定義插槽需要使用{}或者使用renderSlot函數(shù)
setup 函數(shù)默認(rèn)接收兩個(gè)參數(shù) 1. props 2. ctx 上下文 其中包含 slots、attrs、emit 等
import { renderSlot } from "vue"
export default defineComponent({
// 從ctx中解構(gòu)出來 slots
setup(props, { slots }) {
return () => (
<div>
{ renderSlot(slots, 'default') }
{ slots.title?.() }
</div>
)
}
})使用插槽
可以通過 v-slots 來使用插槽
import Vslot from './slotTem'
export default defineComponent({
setup() {
return () => (
<div class={'box'}>
<Vslot v-slots={{
title: () => {
return <p>我是title插槽</p>
},
default: () => {
return <p>我是default插槽</p>
}
}} />
</div>
)
}
})8、使用 tsx 實(shí)現(xiàn)遞歸組件-菜單
主要功能就是根據(jù)路由信息自動(dòng)取生成菜單
效果如下
代碼如下，如果需要控制權(quán)限啥的，自己在路由信息的meta中添加對(duì)應(yīng)的參數(shù)，然后在menuItem中自行控制
// index.tsx
import { routes } from '@/router/index'
import MenuItem from './menuItem'
import './index.scss'
export default defineComponent({
setup() {
const isShowRoutes = computed(() => {
return routes
})
const currentPath = computed(() => {
return useRoute().path
})
return () => (
<el-scrollbar class={`menuContent`}>
<el-menu
default-active={currentPath.value}
mode="vertical"
class={'menu'}
>
{
isShowRoutes.value.map((route) => {
return <MenuItem item={route} key={route.path}></MenuItem>
})
}
</el-menu>
</el-scrollbar>
)
}
})// menuItem.tsx
import { defineComponent, PropType } from 'vue'
import { RouteRecordRaw } from 'vue-router'
import './index.scss'
const MenuItem = defineComponent({
name: 'MenuItem',
props: {
item: {
type: Object as PropType<RouteRecordRaw>,
required: true
}
},
setup(props: { item: any }) {
const router = useRouter()
const jumpRoute = (path: string) => {
router.push(path)
}
return () => {
let { item } = props
if (item.children) {
const slots = {
title: () => {
return <div>
<span>{item.meta.title}</span>
</div>
}
}
return <el-sub-menu index={item.path} v-slots={slots}>
{item.children.map((child: RouteRecordRaw) => {
return <MenuItem item={child} key={child.path}></MenuItem>
})}
</el-sub-menu>
} else {
return <el-menu-item index={item.path} onClick={() => jumpRoute(item.path)}>{item.meta.title}</el-menu-item>
}
}
}
})
export default MenuItem總結(jié)
到此這篇關(guān)于如何在vue3中優(yōu)雅的使用jsx/tsx的文章就介紹到這了,更多相關(guān)vue3優(yōu)雅使用jsx/tsx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue輸入框?qū)崟r(shí)驗(yàn)證IP地址合法性并在下方進(jìn)行提示功能實(shí)現(xiàn)
在Vue組件中的IP地址輸入框定義一個(gè)checkIpAddress方法,該方法使用正則表達(dá)式對(duì)傳入的IP地址進(jìn)行驗(yàn)證,這篇文章主要介紹了Vue輸入框?qū)崟r(shí)驗(yàn)證IP地址合法性并在下方進(jìn)行提示,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue2.0 中#$emit,$on的使用詳解,需要的朋友可以參考下2017-06-06
Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-10-10
Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透問題的實(shí)現(xiàn)
這篇文章主要介紹了Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透問題的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機(jī)制(bus)的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了一篇關(guān)于Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)，有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
vue中el-table格式化el-table-column內(nèi)容的三種方法
本文主要介紹了vue中el-table格式化el-table-column內(nèi)容的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue3版本網(wǎng)頁小游戲設(shè)計(jì)思路
最近火爆全網(wǎng)的羊了個(gè)羊小程序，背景是根據(jù)官方介紹，“羊了個(gè)羊”是一款闖關(guān)消除小游戲，通關(guān)率不到0.1%。主要玩法為重疊的各類方塊，需要在下方7個(gè)欄內(nèi)完成消除，其特點(diǎn)就是“極難”，也因此成為熱門挑戰(zhàn)，對(duì)vue3版本網(wǎng)頁小游戲設(shè)計(jì)思路感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要為大家介紹了vue基于electron構(gòu)建第一個(gè)程序過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了vue頁面狀態(tài)持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12