建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
在 Vue3 中優(yōu)雅的使用 Jsx/Tsx
前言
相信 react 的伙伴對于 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中 由雙大括號{{}} 變?yōu)榱藛未罄ㄌ杮}。
// vue3模板語法
{{ a + b }}
// jsx/tsx
{ a + b }
2、class與style 綁定
class類名綁定有兩種方式，使用模板字符串或者使用數(shù)組。
- 使用模板字符串兩個(gè)類名之間使用空格隔開。
// 模板字符串header
//數(shù)組header
style綁定需要使用 雙大括號。
const color = 'red'
const element =style
3、條件渲染
- jsx/tsx中只保留了v-show指令，沒有 v-if指令。
- 使用if/else和三目表達(dá)式都可以實(shí)現(xiàn)。
setup() {
const isShow = false
const element = () {
if (isShow) {
return 我是if
} else {
return 我是else
}
}
return () (
我是v-show
{
element()
}
{
isShow ? 我是三目1
: 我是三目2
}
)
}4、列表渲染
同樣，jsx/tsx 中也沒有 v-for指令，需要渲染列表我們只需要使用Js 的數(shù)組方法 map 就可以了。
setup() {
const listData = [
{name: 'Tom', age: 18},
{name: 'Jim', age: 20},
{name: 'Lucy', age: 16}
]
return () (
姓名
年齡
{
prop.listData.map(item => {
return
{item.name}
{item.age}
})
}
)
}5、事件處理
- 綁定事件使用的也是 單大括號{}，不過事件綁定不是以 @為前綴了，而是改成了 on，例如：click 事件是 onClick。
- 如果需要使用事件修飾符，就需要借助withModifiers方法啦，withModifiers 方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是綁定的事件，第二個(gè)參數(shù)是需要使用的事件修飾符。
setup() {
const clickBox = val {
console.log(val)
}
return () (
clickBox('box1')}>
我是box1
clickBox('box2')}>
我是box2
clickBox('box3'), ['stop'])}>我是box3
)
}6、v-model
jsx/tsx是支持v-model語法的。
// 正常寫法
// vue
// jsx
// 指定綁定值寫法
// vue
// jsx
// 修飾符寫法
// vue
// jsx
7、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 () (
{ renderSlot(slots, 'default') }
{ slots.title?.() }
)
}
})使用插槽
可以通過 v-slots 來使用插槽。
import Vslot from './slotTem'
export default defineComponent({
setup() {
return () (
title: () => {
return 我是title插槽
},
default: () => {
return 我是default插槽
}
}} />
)
}
})
8、使用 tsx 實(shí)現(xiàn)遞歸組件-菜單
主要功能就是根據(jù)路由信息自動取生成菜單。
效果如下：
代碼如下，如果需要控制權(quán)限啥的，自己在路由信息的meta中添加對應(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 () (
default-active={currentPath.value}
mode="vertical"
class={'menu'}
>
{
isShowRoutes.value.map((route) => {
return
})
}
)
}
})
// 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,
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
{item.meta.title}
}
}
return
{item.children.map((child: RouteRecordRaw) => {
return
})}
} else {
return jumpRoute(item.path)}>{item.meta.title}
}
}
}
})
export default MenuItem
本文名稱：在 Vue3 中優(yōu)雅的使用 Jsx/Tsx
網(wǎng)頁地址：http://www.dlmjj.cn/article/dpghech.html
