前端Vuer，请收下这份《Vue3中使用JSX简明语法》前端Vuer，请收下这份《Vue3中使

文章图片

Vue DevUI 所有组件都是 Vue3 + JSX 语法写的，我虽然会 Vue3，但是我不会 JSX 怎们办？
有了这份《Vue3中使用JSX简明语法》宝典就不慌啦！

文章图片

这份宝典汇集了所有你在写 Vue3 项目可能会用到的常用 JSX 语法。
1 文本插值 Vue里面文本插值默认是用双大括号:

{{ msg }}

在JSX中变成了单大括号：

const name = 'Vue DevUI' const element = Hello, { name }

和Vue模板语法中的文本插值一样，大括号内支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，formatName(user)等。
2 条件渲染 jsx本身也是一个条件表达式，不再需要使用v-if指令。
2.1 使用 if/else

const element = (name) => { if (name) { return Hello, { name } } else { return Hello, Stranger } }

以上代码等效于：

const element = (name) => Hello, { name || 'Stranger' }

2.2 使用三目运算符

const element = icon ?: null;

以上代码等效于：

const element = icon && ;

3 列表渲染列表渲染直接使用JS数组的map方法即可，不需要使用v-for指令。

const data = https://www.it610.com/article/[{ id: 1, title:'通用' }, { id: 2, title: '导航' }]const element = data.map(item => { return { item.title } })

4 标签属性绑定属性绑定也是使用大括号包裹，不需要使用v-bind指令。

const href = 'https://devui.design/'const element = DevUI Design

5 class 类名绑定直接使用JS模板字符串即可。

const element =

也可以使用数组：

const element = Item

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

const width = '100px'const element =

7 事件绑定绑定事件也是用大括号，注意事件名前面要加上on前缀，比如click事件要写成onClick，mouseenter事件要写成onMouseenter。

const confirm = () => { // 确认提交 }

如果要带参数，需要使用箭头函数进行包裹：

const confirm = (name) => { // 确认提交 }

7.1 事件修饰符
jsx中给事件增加修饰符需要借助withModifiers方法。

import { withModifiers, defineComponent, ref } from 'vue'const App = defineComponent({ setup() { const count = ref(0); const inc = () => { count.value++; }; return () => ( { count.value } ); }, })

注意：Vue模板中ref变量是可以直接解构的，但是在jsx中不行，需要记得添加.value，比如上面的{ count.value }。

8 v-model 双向绑定

绑定modelValue

这种情况比较简单。
JSX写法：

SFC写法：

绑定自定义名称

比如绑定visible，JSX中不能直接用v-model:visible的语法，需要传入一个数组[menuShow.value, 'visible']，数组的第二个参数就是要绑定的自定义名称。
JSX写法：

SFC写法：

9 slot 插槽 jsx中没有标签，定义插槽需要使用双大括号。
如果是具名插槽，则将default改成具名插槽的名称，比如mySlot，则使用ctx.slots.mySlot?.()。
插槽从setup的第二个参数ctx中获取，不需要加$前缀。

import { defineComponent } from 'vue'export default defineComponent({ setup(props, { slots }) { // 逻辑 return () => { return } }, })

还可以使用renderSlot方法：

import { renderSlot } from 'vue'

9.1 Scoped Slots 作用域插槽
使用作用域插槽可以实现插槽传参，以下是具体的示例。
JSX和SFC中插槽使用的写法对比。
JSX写法：

{{ mySlot: (item) => (item.open ? : ), }}

还可以通过v-slots的方式使用：

(item.open ? : ) }}>

SFC写法：

其中的item是插槽的参数，通过

ctx.slots.mySlot(item)

的方式给插槽传入参数。
或者使用renderSlot方法，第三个参数就是要传给插槽的参数：

import { renderSlot, useSlots } from 'vue'

10 小结本文是一个小册子，主要介绍在 Vue3 中使用 JSX 的语法和实践，包含了文本插值、属性绑定、事件绑定、双向绑定、条件渲染、列表渲染、插槽等几乎所有的 Vue3 语法，如果你也在 Vue3 中写 JSX，这份指南或许能提供一点参考。
欢迎加入 Vue DevUI 开源项目，一起探索更多 Vue3 + JSX 的玩法！
添加DevUI小助手微信：devui-official，加入我们的技术交流群，一起玩开源！
https://github.com/DevCloudFE/vue-devui/