My current goal is to pass the emit name as a string (for example, 'showComponent') from child to parent. I then want to trigger another emit in the emitAction(callbackName: string) function, and finally execute the showComponent() function.
I'm not seeing any errors or warnings, so where am I going wrong?
Parent component:
<script setup lang="ts">
const showLoginPopup: Ref<boolean> = ref(false);
function showComponent() {
showLoginPopup.value = true;
}
const emit = defineEmits<{
(event: string): void;
}>()
function emitAction(callbackName: string) {
emit(callbackName);
}
</script>
<template>
<ActionVue @emitAction="emitAction" v-for="action in actions"
:title="action.title"
:description="action.description"
:buttonTitle="action?.buttonTitle"
:actionType="action.actionType" />
</template>
Child component:
<script setup lang="ts">
const props = defineProps<Action>();
const emit = defineEmits<{
(event: 'emitAction', callbackName: string): void;
}>()
</script>
<template>
<button @click="emit('emitAction', props.actionType)">
{{ props.buttonTitle }}
</button>
</template>