能否在Vue SFC的<script setup>中定义JSX组件并在模板内使用？

完全支持实现和React一致的、在主组件文件内快速创建小型组件的能力，但你给出的示例写法有小问题，需要按规则调整才能正常运行。

前置要求 #

• 项目需要开启JSX编译支持：Vite搭建的Vue3项目只需安装@vitejs/plugin-vue-jsx插件并在配置文件中注册即可，Vue CLI创建的项目内置了JSX支持无需额外配置。

原示例写法不生效的原因 #

你写的const SmallComponent = <div>Test</div>本质是直接执行JSX生成了一个静态VNode，不是可被<SmallComponent />标签识别的合法组件定义，模板解析组件标签时会校验传入值的组件类型，直接传VNode无法按组件逻辑挂载。

两种正确实现方案 #

方案1：定义为合法的函数式组件（最接近React内联组件体验） #

把JSX包裹在函数中，形成可被调用的函数式组件，即可直接在模板中以标签形式引用，支持传props、绑定事件：

<script setup>
// 无props的简单内联组件
const SmallComponent = () => <div class="small-box">Test 内联小组件</div>

// 带props的内联组件
const TagItem = (props) => <span class="tag">{props.name}</span>
</script>

<template>
  <div class="container">
    <SmallComponent />
    <TagItem name="测试标签" />
  </div>
</template>

方案2：直接渲染预创建的VNode #

如果你只是想直接渲染提前写好的JSX片段，不需要组件的生命周期、状态能力，可以直接用内置的<component>组件挂载VNode，不需要定义成完整组件：

<script setup>
// 直接创建VNode片段
const staticBlock = <div class="static-tip">这是一段静态JSX提示内容</div>
</script>

<template>
  <div class="container">
    <component :is="staticBlock" />
  </div>
</template>

使用注意 #

• 这种内联写法适合逻辑极简单、不需要跨文件复用的轻量UI块，复杂组件依然建议拆分独立SFC文件维护，避免主文件逻辑过于臃肿。
• 内联函数式组件不要加多余的响应式包裹，普通箭头函数返回JSX即可被正常识别。

内容的提问来源于stack exchange，提问作者Dalibor Čarapić