Recently started learning vue and exploring event handling between Children and Parents.
I've developed a child component with an emit exposed in the script setup:
const emit = defineEmits(['OnTileClicked'])
function TileClicked()
{
{{counter.value++}}
console.log( props.tileId + " Tile clicked in Child component");
emit('OnTileClicked');
}
The above function is triggered successfully, as I can see the message in the console.
In the parent component, I have included the following template code:
<CheckerBoardTile width= 100% id="1" tileId="tile1" @OnTileClicked()="TileClicked('Tile1')"/>
And in the script setup, the following code is implemented:
const totalClickCount = ref(100);
function TileClicked(name)
{
totalClickCount.value++;
console.log(name + ' Clicked Detected Total:' + totalClickCount.value);
}
However, the parent function does not get executed.
Your assistance is much appreciated.
- Darran
The expected behavior was for the parent function to be triggered upon firing the child event.