Vueで使用するdefineEmitsについて、なぜ親コンポーネントでカスタムイベントを受け取って実行する関数に()を付けるとうまく動作しなくなるのでしょうか？

解決したい問題

とても初歩的なことだとは思うのですが、いろいろ調べても解決しなかったのでこちらで質問させていただきます。
以下のコードは「definePropsとdefineEmitsを使って子コンポーネントと親コンポーネントでデータをやり取りし、ボタンを押すとカウントが1ずつ増えるコード」で思い通りに動作しているのですが、親コンポーネントの@clicked="addNumber"の部分を@clicked="addNumber()"に書き換えると、子コンポーネントから受け取る情報が「undefined」になってしまいます。
()を付けるとなぜ子コンポーネントからデータを受け取れなくなってしまうのか知りたいです。
引数に関する初歩的な問題な気がするのですがご教授頂けると幸いです。

ChildComponent.vue
1<!--==================== template ====================-->
2<template>
3  <button @click="startingCustomEvent()">{{ number }}</button>
4</template>
5
6<!--==================== script ====================-->
7<script setup>
8const props = defineProps({
9  number: {
10    type: Number,
11    required: true
12  }
13});
14
15const emit = defineEmits(['clicked']);
16const startingCustomEvent = () => {
17  emit('clicked', props.number);
18};
19</script>

ParentComponent.vue
1<!--==================== template ====================-->
2<template>
3  <p>{{ sum }}</p>
4  <MyCounter :number="1" @clicked="addNumber"/>
5</template>
6
7<!--==================== script ====================-->
8<script setup>
9import { ref } from 'vue';
10import MyCounter from '../../components/ChildComponent.vue';
11
12const sum = ref(0);
13const addNumber = (number) => {
14  sum.value += number;
15};
16</script>
17コード

行動規範の内容に同意します

回答2件

ベストアンサー

v-onディレクティブはイベントを制御するディレクティブです。そして、この用例でv-onディレクティブは二通りに用いられている（厳密には別モノ）のでそれを混同しているのだと思います。

1：任意のイベントでメソッドを制御する（イベントハンドリングのインラインメソッドハンドラ）
2：子コンポーネントからの値を受け取る（カスタムイベント）

１：任意のイベントを制御するケース（イベントハンドリング）

@click="startingCustomEvent()はv-on:click="startingCustomEvent()"の省略形で、同一コンポーネントでメソッドを呼び出しています。つまりclickイベントでstartingCustomEvent()というインラインメソッドを呼び出しています。そしてイベントハンドリングの場合はコールバック関数を用いるメソッドイベントハンドラ（v-on:click="startingCustomEventという記述形式で、メソッドの引数からイベントを受け取る）でもインラインメソッドイベントハンドラのいずれでも問題ありません。