聊聊vue3中優雅使用 jsx/tsx 的方法

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 id="strong-列表渲染-strong"><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、事件處理

• 綁定事件使用的也是單大括號{}，不過事件綁定不是以@為前綴了，而是改成了on，例如：click 事件是onClick

• #如果需要使用事件修飾符，就需要藉助 withModifiers方法啦，withModifiers 方法接收兩個參數，第一個參數是綁定的事件，第二個參數是需要使用的事件修飾符

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前端開發、程式設計基礎影片）