vue中如何優雅的使用 jsx/tsx？以下這篇文章為大家介紹vue3中優雅使用 jsx/tsx 的方法，希望對大家有幫助！
相信react 的夥伴對於jsx/tsx 都不陌生吧，現在在vue3 中也可以使用jsx/tsx 語法拉。 【相關推薦：vuejs影片教學】
安裝外掛程式（@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(),
]
})登入後複製
配置完就可以在專案中使用jsx/tsx#啦
1、插值
jsx/tsx 的插值與vue 模板語法中的插值一樣，支援有效的Javascript表達式，例如：a b, a || 5...
只不過在jsx/tsx中由雙大括號{{}} 變成單大括號{}
// vue3模板语法
<span>{{ a + b }}</span>
// jsx/tsx
<span>{ a + b }</span>登入後複製
2、class與style 綁定
class類別名稱綁定有兩種方式，使用模板字串或使用陣列。
// 模板字符串
<div>header</div>
//数组
<div>header</div>
登入後複製
style綁定需要使用雙大括號
const color = 'red'
const element = <sapn>style</sapn>
登入後複製
3、條件渲染
- jsx/tsx中只保留了
v-show指令，沒有v-if指令
- 使用
if/else和三目表達式都可以實現
setup() {
const isShow = false
const element = () => {
if (isShow) {
return <span>我是if</span>
} else {
return <span>我是else</span>
}
}
return () => (
<div>
<span>我是v-show</span>
{
element()
}
{
isShow ? <p>我是三目1</p> : <p>我是三目2</p>
}
<div>
)
}<h2 data-id="heading-4"><strong>4、列表渲染</strong></h2>
<p>同樣，jsx/ tsx 中也沒有<code>v-for</code>指令，需要渲染列表我們只需要使用Js 的陣列方法<code>map</code> 就可以了</p>
<pre class="brush:php;toolbar:false">setup() {
const listData = [
{name: 'Tom', age: 18},
{name: 'Jim', age: 20},
{name: 'Lucy', age: 16}
]
return () => (
<div>
<div>
<span>姓名</span>
<span>年龄</span>
</div>
{
prop.listData.map(item => {
return <div>
<span>{item.name}</span>
<span>{item.age}</span>
</div>
})
}
</div>
)
}登入後複製
5、事件處理
setup() {
const clickBox = val => {
console.log(val)
}
return () => (
<div> clickBox('box1')}>
<span>我是box1</span>
<div> clickBox('box2')}>
<span>我是box2</span>
<div> clickBox('box3'), ['stop'])}>我是box3</div>
</div>
</div>
)
}登入後複製
6、v-model
jsx/tsx是支援v-model語法的
// 正常写法
<input> // vue
<input> // jsx
// 指定绑定值写法
<input> // vue
<input> // jsx
// 修饰符写法
<input> // vue
<input> // jsx
登入後複製
7、slot插槽
定義插槽
jsx/tsx中是沒有slot 標籤的，定義插槽需要使用 {}或使用renderSlot函數
setup 函數預設接收兩個參數1. props 2.ctx 上下文包含slots、attrs、emit 等
import { renderSlot } from "vue"
export default defineComponent({
// 从ctx中解构出来 slots
setup(props, { slots }) {
return () => (
<div>
{ renderSlot(slots, 'default') }
{ slots.title?.() }
</div>
)
}
})登入後複製
使用插槽
可以透過v-slots 來使用插槽
import Vslot from './slotTem'
export default defineComponent({
setup() {
return () => (
<div>
<vslot> {
return <p>我是title插槽</p>
},
default: () => {
return <p>我是default插槽</p>
}
}} />
</vslot>
</div>
)
}
})登入後複製
8、使用tsx 實作遞歸元件-選單
主要功能就是根據路由資訊自動取產生選單
效果如下
#程式碼如下，如果需要控制權限啥的，自己在路由資訊的meta中加入對應的參數，然後在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>
<el-menu>
{
isShowRoutes.value.map((route) => {
return <menuitem></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>
{item.children.map((child: RouteRecordRaw) => {
return <menuitem></menuitem>
})}
</el-sub-menu>
} else {
return <el-menu-item> jumpRoute(item.path)}>{item.meta.title}</el-menu-item>
}
}
}
})
export default MenuItem</routerecordraw>登入後複製
（學習影片分享：web前端開發、程式設計基礎影片）
