您现在的位置是：网站首页> 编程资料编程资料

如何在vue3中优雅的使用jsx/tsx详解_vue.js_

2023-05-24 387人已围观

简介如何在vue3中优雅的使用jsx/tsx详解_vue.js_

前言

相信 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 () => (  { 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 () => (  { 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的文章就介绍到这了,更多相关vue3优雅使用jsx/tsx内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

vue3+vite使用jsx和tsx详情

上一篇：详解JavaScript中的this硬绑定_javascript技巧_

下一篇：React实现antdM的级联菜单实例_React_