Skip to content

Commit

Permalink
Add note about how to reference generic components (#2945)
Browse files Browse the repository at this point in the history
  • Loading branch information
richardsimko authored Jul 23, 2024
1 parent 327acb6 commit 0408888
Showing 1 changed file with 19 additions and 0 deletions.
19 changes: 19 additions & 0 deletions src/api/sfc-script-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -469,6 +469,25 @@ defineProps<{
</script>
```

In order to use a reference to a generic component in a `ref` you need to use the [`vue-component-type-helpers`](https://www.npmjs.com/package/vue-component-type-helpers) library as `InstanceType` won't work.

```vue
<script
setup
lang="ts"
>
import componentWithoutGenerics from '../component-without-generics.vue';
import genericComponent from '../generic-component.vue';
import type { ComponentExposed } from 'vue-component-type-helpers';
// Works for a component without generics
ref<InstanceType<typeof componentWithoutGenerics>>();
ref<ComponentExposed<typeof genericComponent>>();
```


## Restrictions {#restrictions}

- Due to the difference in module execution semantics, code inside `<script setup>` relies on the context of an SFC. When moved into external `.js` or `.ts` files, it may lead to confusion for both developers and tools. Therefore, **`<script setup>`** cannot be used with the `src` attribute.
Expand Down

0 comments on commit 0408888

Please sign in to comment.