I have two globally registered components ParentComponent and ChildComponent. The benefit of global registration is that these components are accessible throughout the entire app without needing to be imported into other components. However, when it comes to types, accessing them from a component still requires importing them (see example in ParentComponent code below). Is there a way to export a type from a component to the "global" scope so that it can be used anywhere in the app?
main.ts
import { createApp} from 'vue'
import App from './App.vue'
import ParentComponent from './ParentComponent.vue'
import ChildComponent from './ChildComponent.vue'
const app = createApp(App)
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)
app.mount('#app')
ChildComponent (excerpt)
export type ChildComponentEvent = {
message: string
}
export default defineComponent({
methods: {
emitEvent () {
const event: ChildComponentEvent = {
message: 'Hello from child'
}
this.$emit('child-event', event)
}
}
})
ParentComponent (excerpt)
import { ChildComponentEvent } from './ChildComponent'
export default defineComponent({
methods: {
childEventHandler (event: ChildComponentEvent) {
console.log(event)
}
}
})