<script composable> in Components

[fabianwohlfart]

I often come to the point where I have the same component used in different parent components. For example let's say it's a FileUpload component. This FileUpload emits the uploaded file to it's parent. This parent has to handle the uploaded file, e.g. show it in a list. We have a different parent component for a File (pdf), an Image (jpg) and a Video (mp4). So each of the parent components may use the same function handleUpload(). While it's not smart to repeat ourself, we are writing a composable for this; maybe not only a handleUpload(), but also a prepareData() and whatsoever. This composable now lies in a third file, away from the party (first file: child, second file: parent)…
How would it be to have a <script composable> in a component which exposes the same of what a composable does but only to it's parents? I am aware that there are probably many caveats to this idea. On the other side: I always loved that SFC contain everything they need, and now my child component needs to expose functions to it's parent, which is only particular interesting for it's parents, not in the whole App.

[likui628]

Renderless Components

https://vuejs.org/guide/components/slots.html#scoped-slots

<Upload v-slot="slotProps">
    <File :file="slotProps.path"/>
</Upload>

• Renderless Components Pattern in Vue.js 3 - Lachlan Miller
• Composables vs. Renderless Components in Vue 3

[fabianwohlfart]

Thanks for the input. Your solution would bring together two different concerns.
You would make the File dependent on Upload.
Whereas my initial ida was to build a system where the Upload is only responsible for the file handling, and another sibling component List is responsible for a view.