vue3 tsx setup

在Vue 3中，可以使用TSX编写组件并使用setup函数进行组件的设置。TSX是通过@vitejs/plugin-vue-jsx插件来实现的。首先，你需要安装该插件并将其添加到vite.config.ts的plugins配置中。安装命令为npm install @vitejs/plugin-vue-jsx -D。然后，在vite.config.ts中导入该插件并将其添加到plugins数组中。最后，修改tsconfig.json文件，将jsx配置项设置为"preserve"，并设置jsxFactory和jsxFragmentFactory分别为"h"和"Fragment"。这样就完成了TSX的安装配置。

在TSX中，可以通过传入ctx参数来派发事件并传递参数。定义一个renderDom函数，接收props和ctx两个参数。然后在函数体内部返回组件的JSX代码。在代码中，可以使用ctx.emit方法来派发自定义事件，并传递参数。在具体的点击事件中，可以通过ontapClick函数来处理点击事件，并调用ctx.emit方法来派发事件。

在父组件中，可以通过在模板中使用renderDom组件，并通过@on-click来监听自定义事件。当事件被触发时，可以通过getNum函数来接收传递的参数。

总结起来，Vue 3中的TSX使用方式是通过安装配置@vitejs/plugin-vue-jsx插件，使用setup函数进行组件的设置，通过ctx参数派发事件并传递参数，通过监听自定义事件来接收参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3 + vite + ts + setup , 第七练 TSX的使用](https://blog.csdn.net/csl125/article/details/125288459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]