如何在vue3中优雅地使用jsxtsx实现组件开发？

本文共计1577个文字，预计阅读时间需要7分钟。

目录+前言+安装插件（@vitejs/plugin-vue-jsx）+1. 插件配置+2. 使用class与style绑定+3. 条件渲染+4. 列表渲染+5. 事件处理+6. 使用v-model+7. 使用slot插槽+8. 使用tsx+实现递归组件+菜单+总结+前言+信任react的伙伴

目录

• 前言
• 安装插件（@vitejs/plugin-vue-jsx）
• 1、插值
• 2、class与style 绑定
• 3、条件渲染
• 4、列表渲染
• 5、事件处理
• 6、v-model
• 7、slot插槽
• 8、使用 tsx 实现递归组件-菜单
• 总结

前言

相信 react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 vue3 中也可以使用 jsx/tsx 语法拉。

安装插件（@vitejs/plugin-vue-jsx）

vite官方提供了官方的插件来支持在vue3中使用jsx/tsx，直接安装就行。