Can I define a Vue JSX component within a SFC <script setup> and use it in the SFC template?-CodePudding

I like that in React you can quickly create small components within the main component file. Is something like that possible with Vue 3 composition API?

Something like this:

Component.vue

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

CodePudding user response：

The problem here is that SmallComponent is not a component but vnode object. Vnodes can be directly rendered in render functions but not templates.

Instead, it should be functional component:

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

In script setup, it's the only available option, because the syntax provides a subset of functionality and doesn't support render functions.