Vue3中使用JSX简明语法分享一些在vue3中比较常使用的JSX简明写法，包括：文本插值、条件渲染、列表渲染、标签属性

- 文本插值

vue里面文本插值默认用双大括号，写在template中

JSX里面使用单大括号，写在script中

JSX的大括号内支持任何有效的js语法

JSX本身是一个表达式，所以不需要v-if指令

列表渲染直接使用js的map方法即可，不需要使用模板语法中的v-for

属性也是使用大括号，不需要使用v-bind指令

直接使用JSX模板字符串即可,也可以使用数组

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

绑定事件也要用大括号，但事件名要加上on,比如click事件要写成onClick 如果带参数还要用箭头函数对参数进行包裹

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

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

1、绑定modelValue

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

JSX没有这个标签，定义插槽需要使用双大括号

如果是具名插槽，则将default改成具名插槽的名称，比如mySlot改成ctx.slots.mySlot?.()

插槽做setup的第二个参数ctx中获取，不需要加$前缀

还可以使用renderSlot方法：

使用作用域插槽可以实现插槽传参

部分代码片段

本文参考《# 前端Vuer，请收下这份《Vue3中使用JSX简明语法》 juejin.cn/post/711406…

之所以要自己写一下，就是为了加深印象，自然是写得不如原创的。