在 Vue3 中优雅的使用 Jsx/Tsx

前言

相信 react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 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(),
  ]
})

配置完就可以在项目中使用jsx/tsx啦。

1、插值

jsx/tsx 的插值与 vue 模板语法中的插值一样，支持有效的 Javascript表达式，比如：a + b, a || 5...。

只不过在 jsx/tsx中由双大括号{{}} 变为了单大括号{}。

// vue3模板语法
{{ a + b }}

// jsx/tsx
{ a + b }

2、class与style 绑定

class类名绑定有两种方式，使用模板字符串或者使用数组。

使用模板字符串两个类名之间使用空格隔开。

// 模板字符串
header

//数组
header

style绑定需要使用双大括号。

const color = 'red'
const element = style

3、条件渲染

jsx/tsx中只保留了v-show指令，没有 v-if指令。
使用if/else和三目表达式都可以实现。

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 的数组方法 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 方法接收两个参数，第一个参数是绑定的事件，第二个参数是需要使用的事件修饰符。

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 标签的，定义插槽需要使用{}或者使用renderSlot函数。

setup 函数默认接收两个参数 1. props 2. ctx 上下文其中包含 slots、attrs、emit 等。

import { renderSlot } from "vue"
export default defineComponent({
    // 从ctx中解构出来 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 实现递归组件-菜单

主要功能就是根据路由信息自动取生成菜单。

效果如下：

代码如下，如果需要控制权限啥的，自己在路由信息的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 () (
            
                                    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 中优雅的使用 Jsx/Tsx
文章位置：http://www.kswsj.com/qtweb/news24/357674.html

网站建设、网络推广公司-成都快上网，一家网站设计、网站制作公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：成都快上网

成都快上网科技猜您喜欢