I want to call an inner function of a component if I click a button. There are many suggestions using shared data, but it should work separately for different components. Here’s an example:
// Page.vue
<template>
<MyComponent my-prop="abc"/>
<button @click="???">ButtonX</button>
<MyComponent my-prop="123"/>
<button @click="???">ButtonY</button>
</template>
// ...
// MyComponent.vue:
<script>
function foo() {
//Do something inside this component
}
</script>
// ...
My goal is that if I press ButtonX then foo()
function called for <MyComponent my-prop="abc"/>
but if I press ButtonY the same inner foo()
function runs for <MyComponent my-prop="123"/>
.
How could I achieve that? (The components could be far from each other in the component tree.)
I prefer solution using only Vue 3 and Pinia.