在 Vue3 中优雅的使用 Jsx/Tsx

,相信 react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 vue3 中也可以使用 jsx/tsx 语法拉。,vite官方提供了官方的插件来支持在vue3中使用jsx/tsx，直接安装就行。,安装完之后在vite.config.ts中插入一下代码。,配置完就可以在项目中使用jsx/tsx啦。,jsx/tsx 的插值与 vue 模板语法中的插值一样，支持有效的 Javascript表达式，比如：a + b, a || 5…。,只不过在 jsx/tsx中 由双大括号{{}} 变为了单大括号{}。,class类名绑定有两种方式，使用模板字符串或者使用数组。,style绑定需要使用 双大括号。,同样，jsx/tsx 中也没有 v-for指令，需要渲染列表我们只需要使用Js 的数组方法 map 就可以了。,jsx/tsx是支持v-model语法的。,jsx/tsx中是没有 slot 标签的，定义插槽需要使用{}或者使用renderSlot函数。,setup 函数默认接收两个参数 1. props 2. ctx 上下文 其中包含 slots、attrs、emit 等。,可以通过 v-slots 来使用插槽。,主要功能就是根据路由信息自动取生成菜单。,效果如下：,,代码如下，如果需要控制权限啥的，自己在路由信息的meta中添加对应的参数，然后在menuItem中自行控制。,