如题所述
在 Vue 3 中，尽管我们习惯于SFC（Single File Component）单文件组件模式，但Vue也支持JSX/TSX的使用。这篇文章将引导你快速理解和上手Vue中的JSX语法，以便在遇到或使用时能迅速应用。
在Vite项目中集成
首先，为了在项目中启用JSX，你需要安装插件@vitejs/plugin-vue-jsx，配置完成后，你的`vite.config.ts`会有所调整。
JSX应用
在`.vue`文件中，将`script`标签的`lang`设置为`tsx`，并在`setup`函数中返回模板。若使用`.tsx`后缀，记得调整引入组件路径的后缀。这样，你会看到一个显示的Hello World。
对于函数式组件，Vue将props作为第一个参数，`ctx`包含`attrs`、`emit`和`slots`，它们对应于实例的属性。
TSX特点
TSX的一大优势是可以在一个文件定义多个组件，这样页面上会展示多个定义的组件。
JSX与SFC的差异
JSX中插值使用{}包裹，而无需`.value`。条件渲染使用更接近原生的写法，如`{if (cond) renderThis()}`。列表循环使用`map`，并要求有`key`。事件绑定使用`onClick`，需要箭头函数。事件修饰符通过链式驼峰写法设置，如`onClick.once`。
对于`v-model`，在绑定自定义事件时，JSX需要使用一个数组来传递方法，如`> /*...*/}`。
插槽
默认插槽和具名插槽在JSX中的使用与SFC类似，只是在传递插槽内容时，可能需要参数传递。作用域插槽则通过子组件调用插槽时传入参数实现。
总结
虽然Vue3的JSX语法与SFC有所不同，但基本概念和用法是相通的。根据项目需求，两者可以灵活运用。团队协作时，应遵循团队规范或领导建议。
在Vite项目中集成
首先，为了在项目中启用JSX，你需要安装插件@vitejs/plugin-vue-jsx，配置完成后，你的`vite.config.ts`会有所调整。
JSX应用
在`.vue`文件中，将`script`标签的`lang`设置为`tsx`，并在`setup`函数中返回模板。若使用`.tsx`后缀，记得调整引入组件路径的后缀。这样，你会看到一个显示的Hello World。
对于函数式组件，Vue将props作为第一个参数，`ctx`包含`attrs`、`emit`和`slots`，它们对应于实例的属性。
TSX特点
TSX的一大优势是可以在一个文件定义多个组件，这样页面上会展示多个定义的组件。
JSX与SFC的差异
JSX中插值使用{}包裹，而无需`.value`。条件渲染使用更接近原生的写法，如`{if (cond) renderThis()}`。列表循环使用`map`，并要求有`key`。事件绑定使用`onClick`，需要箭头函数。事件修饰符通过链式驼峰写法设置，如`onClick.once`。
对于`v-model`，在绑定自定义事件时，JSX需要使用一个数组来传递方法，如`> /*...*/}`。
插槽
默认插槽和具名插槽在JSX中的使用与SFC类似，只是在传递插槽内容时，可能需要参数传递。作用域插槽则通过子组件调用插槽时传入参数实现。
总结
虽然Vue3的JSX语法与SFC有所不同，但基本概念和用法是相通的。根据项目需求，两者可以灵活运用。团队协作时，应遵循团队规范或领导建议。
温馨提示：答案为网友推荐，仅供参考
