我可以在 SFC <script setup> 中定义 Vue JSX 组件并在 SFC 模板中使用它吗？

Question

我喜欢在 React 中你可以在主组件文件中快速创建小组件。Vue 3 组合 API 可以实现类似的功能吗？

像这样的东西：

组件.vue

<script setup>
    const SmallComponent = <div>Test</div>
</script>
<template>
    <SmallComponent/>
</template>

Answer 1

这里的问题是，这SmallComponent不是一个组件，而是 vnode 对象。Vnode 可以直接在渲染函数中渲染，但不能在模板中渲染。

相反，它应该是功能组件：

const SmallComponent = props => <div>Test</div>

在 中script setup，它是唯一可用的选项，因为语法提供了功能的子集并且不支持渲染函数。