Skip to content

Commit

Permalink
Add docs on how to reference generic components (#2946)
Browse files Browse the repository at this point in the history
  • Loading branch information
richardsimko authored Aug 13, 2024
1 parent 2053725 commit 8a1da00
Showing 1 changed file with 35 additions and 0 deletions.
35 changes: 35 additions & 0 deletions src/guide/typescript/composition-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -423,3 +423,38 @@ import type { ComponentPublicInstance } from 'vue'

const child = ref<ComponentPublicInstance | null>(null)
```

In cases where the component referenced is a [generic component](/guide/typescript/overview.html#generic-components), for instance `MyGenericModal`:

```vue
<!-- MyGenericModal.vue -->
<script setup lang="ts" generic="ContentType extends string | number">
import { ref } from 'vue'
const content = ref<ContentType | null>(null)
const open = (newContent: ContentType) => (content.value = newContent)
defineExpose({
open
})
</script>
```

It needs to be referenced using `ComponentExposed` from the [`vue-component-type-helpers`](https://www.npmjs.com/package/vue-component-type-helpers) library as `InstanceType` won't work.

```vue
<!-- App.vue -->
<script setup lang="ts">
import MyGenericModal from './MyGenericModal.vue'
import type { ComponentExposed } from 'vue-component-type-helpers';
const modal = ref<ComponentExposed<typeof MyModal> | null>(null)
const openModal = () => {
modal.value?.open('newValue')
}
</script>
```

0 comments on commit 8a1da00

Please sign in to comment.