I created a basic component that triggers events whenever a button is clicked.
InnerComponent.vue
<template>
<v-btn @click="emit('something-happened')">Click me</v-btn>
</template>
<script setup lang="ts">
const emit = defineEmits<{ (e: 'something-happened'): void }>()
</script>
This component is used by a container component that doesn't prioritize the event but its parent component does. Currently, I handle the event and trigger it again as follows-
OuterComponent.vue
<template>
<inner-comp @something-happened="onSomethingHappened" />
</template>
<script setup lang="ts">
import InnerComp from "./InnerComp.vue";
const emit = defineEmits<{ (e: 'something-happened'): void }>()
function onSomethingHappened() {
emit("something-happened");
}
</script>
The parent component handles the event-
App.vue
<template>
<v-app>
<v-main>
<outer-comp @something-happened="onSomethingHappened" />
</v-main>
</v-app>
</template>
<script setup lang="ts">
import OuterComp from "./OuterComp.vue";
function onSomethingHappened() {
console.log("something happened");
}
</script>
Is there a way to simplify the code in OuterComponent?
This component requires some boilerplate code to pass the event back to its parent. While it's necessary for this component to define emits for proper TypeScript support, perhaps there is a shortcut syntax to quickly "bubble" the event e.g.
<inner-comp @something-happened.direct-forward="onSomethingHappened" />
For demonstration purposes- See here