Data flow across components
Now we want to bind button click functionality between components so that we can make calculations variable dynamic.
The concepts being introduced here are event handling and event emitters.
Event handling
We can use the v-on directive, which we typically shorten to the @ symbol, to listen to DOM events such as click, mouseover, keyup, etc, and run some JavaScript when they're triggered.
The usage would be v-on:click="handler" or with the shortcut, @click="handler"

Now, let's update each button from the AppButtons component to have a click event that sends a value up the tree using $emit method to the parent component, then updates the calculations variable via a prop from the App.vue
Event emitters
Events are emitted using the $emit method in the template or by defineEmits in script setup. The parent can then listen to it using v-on.
Note: We can emit a camelCase event, but can listen for it using a kebab-cased listener in the parent.
Click event on each button
<!-- ... -->
<app-button 
:symbol="button" 
@click="buttonAction(button)"></app-button>
<!-- ... -->
In the buttonAction function, we call $emit method for each condition satisfied. For instance, symbols such as tan, cos are added with "(", so need to be rendered as so! The basics such as numerics and basic operators are added directly. I've used regex to match for the symbols.
/*...*/
const emit = defineEmits(['basicOps'])
/*...*/
const buttonAction = (symbol: string) => {
const basicMatch = /[+\-/()÷%×\d]/g
 if (basicMatch.test(symbol)) {
    emit('basicOps', symbol)
 } else if (
    ['tan', 'cos', 'log', 'sin', 'ln'].includes(symbol)
    ) {
    emit('basicOps', symbol + '(')
 }
}
💞event handling ✅
Then, when we listen to the event in the parent, we can use an inline arrow function as the listener, which allows us to access the event argument.
When we catch the event in the listener, we call a function updateScreen that updates the result variable passed as prop. If the variable is initially undefined, set the value, otherwise, update it.
<!-- src/App.vue -->
<script setup lang="ts">
/* ... */
const result = ref<string>()

const updateScreen = (_in: string) => {
  if (result.value) result.value += _in
  else result.value = _in 
}
</script>
<template>
  <div class="h-screen w-screen grid place-items-center bg-white">
    <div>
      <app-screen :result="result"></app-screen>
      <app-buttons @basic-ops="(n: string) => updateScreen(n)"></app-buttons>
    </div>
  </div>
</template>
🔥events ✅
Now updating the variable to render on AppScreen from being static to being dynamic as the props value passed.
<script setup lang="ts">
defineProps<{
result?: string
}>()
</script>
<template>
    <!-- ... -->
        <div class="absolute bottom-2 right-2 text-4xl tracking-tighter">
        {{ result ?? '0' }}
        </div>
    <!-- ... -->
</template>
In the next lessons, we'll make use of eval to evaluate basic operations and a library, mathjs, to account for advanced mathematical operations.