Good day, I’m using provide / inject to send a button click event call from Component3 to Component1. Everything works well as I can see the console message in Component1 async function tryMethod() when I press the button named Click ME in Component3. I was wondering how do I go about taking that Component2 template @tryFunction event to also send the async function updateFunction(birthdayYear) to reach Component1?
I tried to add an inject(‘tryFunction’) inside the updateFunction(birthdayYear) and it didn’t work. Any tips much appreciated, thank you!
Component1.vue
<script setup>
import { inject, provide } from 'vue'
provide('tryFunction', tryFunction)
async function tryFunction() {
console.log('Component1 tryFunction() called!')
}
</script>
<template>
<div>Component1 Page</div>
</template>
Component2.vue
<script setup>
import { inject } from 'vue'
import Component3 from '@/files/Component3.vue'
const axios = inject('axios')
const tryFunction = inject('tryFunction')
async function updateFunction(birthdayYear) {
await axios.post(player.data('playerData'), { playerYear: birthdayYear })
}
</script>
<template>
<div>
Component2 Page
<Component3
@tryFunction="tryFunction"
/>
</div>
</template>
Component3.vue
<script setup>
function tryFunctionClicked() {
emit('tryFunction')
}
</script>
<template>
<div>
Component3 Page
<button @click="tryFunctionClicked">Click here</button>
</div>
</template>