如何在 vue3 中使用 jsx/tsx?

发布网友发布时间：2024-09-17 06:36

共1个回答

热心网友时间：2024-09-20 19:37

Vue3中，尽管以SFC（Single File Component）单文件组件模式为主流，但其实也支持JSX/TSX的使用。这篇文章旨在快速引导你理解并实践Vue中的JSX语法，以便在实际项目中能快速上手。

首先，如果你在Vite项目中想用JSX，需要安装插件@vitejs/plugin-vue-jsx，配置好后即可开始。在.vue文件中，将script的lang设置为tsx，返回setup函数中的TSX模板，或直接将文件扩展名改为.tsx。例如，你将看到一个简单的"Hello World"组件显示在页面上。

对于函数式组件，JSX提供了更直接的写法，如将props作为第一个参数，ctx的attrs、emit和slots属性相当于Vue实例的相应特性。而且，TSX允许在一个文件中定义多个组件模板，展示出更大的灵活性。

在插值和条件渲染上，JSX使用{}代替SFC的{{}}，并且在v-if的处理上更为原生。列表循环使用map代替v-for，同样需要添加key。事件绑定上，两者写法不同，JSX采用onClick而非v-on。

关于v-model，尽管在基本绑定上类似，但自定义事件处理上，SFC直接使用v-model:msg，而在JSX中需通过数组方式。至于插槽，无论是默认插槽还是具名插槽，Vue3中的JSX提供了传递参数和作用域插槽的功能，如slots.slotOne(prama1)。

总的来说，Vue3中的JSX语法与SFC有所不同，主要体现在写法上。尽管如此，熟悉了SFC的开发者可以很快掌握。选择使用哪种方式取决于项目需求和个人喜好，团队项目时最好遵循团队规范。希望这篇文章能帮助你在Vue3中顺利应用JSX/TSX。