回答編集履歴

イベントハンドリング

2023/04/20 06:41

投稿

FKM

スコア3640

test CHANGED Viewed

@@ -3,7 +3,7 @@
 1：任意のイベントでメソッドを制御する（イベントハンドリングのインラインメソッドハンドラ）
 2：子コンポーネントからの値を受け取る（カスタムイベント）
-## １：任意のイベントを制御するケース
+## １：任意のイベントを制御するケース（イベントハンドリング）
 @click="startingCustomEvent()はv-on:click="startingCustomEvent()"の省略形で、同一コンポーネントでメソッドを呼び出しています。つまりclickイベントでstartingCustomEvent()というインラインメソッドを呼び出しています。そしてイベントハンドリングの場合はコールバック関数を用いるメソッドイベントハンドラ（v-on:click="startingCustomEventという記述形式で、メソッドの引数からイベントを受け取る）でもインラインメソッドイベントハンドラのいずれでも問題ありません。
 ## ２：子コンポーネントからの値を受け取るケース（カスタムイベント）

コールバック関数

2023/04/20 06:40

投稿

FKM

スコア3640

test CHANGED Viewed

@@ -4,7 +4,7 @@
 2：子コンポーネントからの値を受け取る（カスタムイベント）
 ## １：任意のイベントを制御するケース
-@click="startingCustomEvent()はv-on:click="startingCustomEvent()"の省略形で、同一コンポーネントでメソッドを呼び出しています。つまりclickイベントでstartingCustomEvent()というインラインメソッドを呼び出しています。そしてイベントハンドリングの場合はメソッドイベントハンドラ（v-on:click="startingCustomEventという記述形式で、メソッドの引数からイベントを受け取る）でもインラインメソッドイベントハンドラのいずれでも問題ありません。
+@click="startingCustomEvent()はv-on:click="startingCustomEvent()"の省略形で、同一コンポーネントでメソッドを呼び出しています。つまりclickイベントでstartingCustomEvent()というインラインメソッドを呼び出しています。そしてイベントハンドリングの場合はコールバック関数を用いるメソッドイベントハンドラ（v-on:click="startingCustomEventという記述形式で、メソッドの引数からイベントを受け取る）でもインラインメソッドイベントハンドラのいずれでも問題ありません。
 ## ２：子コンポーネントからの値を受け取るケース（カスタムイベント）
 対する@clickedの**clickedは任意に定義されたemitメソッドで用いるためのプロパティ名で、予約されたイベントとは全く無関係**です。そしてVue上のカスタムイベントという仕様を用いて制御しますが、その場合はインラインメソッドハンドラは使用できません。
@@ -18,11 +18,11 @@
 そして、emitされたメソッドを親コンポーネントで受け取る場合での親コンポーネント上の記述は
-**v-on:emitメソッドでキーとなるプロパティ名=親コンポーネントで受け取りに用いるメソッドイベント（変数）**
+**v-on:emitメソッドでキーとなるプロパティ名=親コンポーネントで受け取りに用いるメソッド（コールバック関数）**
-となります。つまり、質問の条件の通り、子コンポーネントから受け取る場合はカスタムイベントを使うので、メソッドイベントハンドラでないといけないわけです。
+となります。つまり、質問の条件の通り、子コンポーネントから受け取る場合はカスタムイベントを使うので、メソッドイベントハンドラ、つまり右側の式はコールバック関数でないといけないわけです。
-なので
+ちなみに
 emit('hoge', props.number)

Vueのマニュアルに沿って言葉を修正

2023/04/20 06:36

投稿

FKM

スコア3640

test CHANGED Viewed

@@ -1,15 +1,15 @@
-v-onイベントメソッドはイベントを制御するディレクティブです。そして、この用例でv-onディレクティブは二通りに用いられている（厳密には別モノ）のでそれを混同しているのだと思います。
+v-onディレクティブはイベントを制御するディレクティブです。そして、この用例でv-onディレクティブは二通りに用いられている（厳密には別モノ）のでそれを混同しているのだと思います。
-1：任意のイベントメソッドを制御する
+1：任意のイベントでメソッドを制御する（イベントハンドリングのインラインメソッドハンドラ）
-2：子コンポーネントからの値を受け取る
+2：子コンポーネントからの値を受け取る（カスタムイベント）
-## １：任意のイベントメソッドを制御するケース
-@click="startingCustomEvent()はv-on:click="startingCustomEvent()"の省略形で、同一コンポーネントでメソッドを呼び出しています。つまりclickイベントでstartingCustomEvent()を呼び出しています。
+## １：任意のイベントを制御するケース
+@click="startingCustomEvent()はv-on:click="startingCustomEvent()"の省略形で、同一コンポーネントでメソッドを呼び出しています。つまりclickイベントでstartingCustomEvent()というインラインメソッドを呼び出しています。そしてイベントハンドリングの場合はメソッドイベントハンドラ（v-on:click="startingCustomEventという記述形式で、メソッドの引数からイベントを受け取る）でもインラインメソッドイベントハンドラのいずれでも問題ありません。
-## ２：子コンポーネントからの値を受け取るケース
+## ２：子コンポーネントからの値を受け取るケース（カスタムイベント）
-対する@clickedの**clickedは任意に定義されたemitメソッドで用いるためのプロパティ名で、予約されたイベントとは全く無関係**です。
+対する@clickedの**clickedは任意に定義されたemitメソッドで用いるためのプロパティ名で、予約されたイベントとは全く無関係**です。そしてVue上のカスタムイベントという仕様を用いて制御しますが、その場合はインラインメソッドハンドラは使用できません。
-@clicked="addNumber"はv-on:clicked="addNumber"というv:onディレクティブの省略形です。
+@clicked="addNumber"はv-on:clicked="addNumber"というv-onディレクティブの省略形です。
 defineEmitsは任意の子コンポーネントから親コンポーネントに値を送出するためのemitメソッドを生成しており、それを使用する場合、
 **emit('emitメソッドでキーとなるプロパティ名',送出したい変数)**
@@ -18,9 +18,9 @@
 そして、emitされたメソッドを親コンポーネントで受け取る場合での親コンポーネント上の記述は
-**v-on:emitメソッドでキーとなるプロパティ名=親コンポーネントで受け取りに用いるメソッドのオブジェクト（変数）**
+**v-on:emitメソッドでキーとなるプロパティ名=親コンポーネントで受け取りに用いるメソッドイベント（変数）**
-となります。つまり、質問の条件の通り、子コンポーネントから受け取る場合はメソッドを制御するためのオブジェクト（変数）でないといけないわけです。
+となります。つまり、質問の条件の通り、子コンポーネントから受け取る場合はカスタムイベントを使うので、メソッドイベントハンドラでないといけないわけです。
 なので

プロパティ名

2023/04/20 03:33

投稿

FKM

スコア3640

test CHANGED Viewed

@@ -7,7 +7,7 @@
 @click="startingCustomEvent()はv-on:click="startingCustomEvent()"の省略形で、同一コンポーネントでメソッドを呼び出しています。つまりclickイベントでstartingCustomEvent()を呼び出しています。
 ## ２：子コンポーネントからの値を受け取るケース
-対する@clickedは**任意に定義されたemitメソッドで用いるためのプロパティ名で、予約されたイベントとは全く無関係**です。
+対する@clickedの**clickedは任意に定義されたemitメソッドで用いるためのプロパティ名で、予約されたイベントとは全く無関係**です。
 @clicked="addNumber"はv-on:clicked="addNumber"というv:onディレクティブの省略形です。
 defineEmitsは任意の子コンポーネントから親コンポーネントに値を送出するためのemitメソッドを生成しており、それを使用する場合、

送出のためのプロパティ名

2023/04/20 03:31

投稿

FKM

スコア3640

test CHANGED Viewed

@@ -7,18 +7,18 @@
 @click="startingCustomEvent()はv-on:click="startingCustomEvent()"の省略形で、同一コンポーネントでメソッドを呼び出しています。つまりclickイベントでstartingCustomEvent()を呼び出しています。
 ## ２：子コンポーネントからの値を受け取るケース
-対する@clickedは**任意に定義されたプロパティ名で、予約されたイベントとは無関係**です。
+対する@clickedは**任意に定義されたemitメソッドで用いるためのプロパティ名で、予約されたイベントとは全く無関係**です。
 @clicked="addNumber"はv-on:clicked="addNumber"というv:onディレクティブの省略形です。
 defineEmitsは任意の子コンポーネントから親コンポーネントに値を送出するためのemitメソッドを生成しており、それを使用する場合、
-**emit('親コンポーネントに送出するためのプロパティ名',送出したい変数)**
+**emit('emitメソッドでキーとなるプロパティ名',送出したい変数)**
 となります。
 そして、emitされたメソッドを親コンポーネントで受け取る場合での親コンポーネント上の記述は
-**v-on:emitする子コンポーネントのプロパティ名=親コンポーネントで受け取りに用いるメソッドのオブジェクト（変数）**
+**v-on:emitメソッドでキーとなるプロパティ名=親コンポーネントで受け取りに用いるメソッドのオブジェクト（変数）**
 となります。つまり、質問の条件の通り、子コンポーネントから受け取る場合はメソッドを制御するためのオブジェクト（変数）でないといけないわけです。

メソッドのオブジェクト

2023/04/20 03:28

投稿

FKM

スコア3640

test CHANGED Viewed

@@ -18,9 +18,9 @@
 そして、emitされたメソッドを親コンポーネントで受け取る場合での親コンポーネント上の記述は
-**v-on:emitする子コンポーネントのプロパティ名=親コンポーネントで受け取りに用いるオブジェクト**
+**v-on:emitする子コンポーネントのプロパティ名=親コンポーネントで受け取りに用いるメソッドのオブジェクト（変数）**
-となります。つまり、質問の条件の通り、子コンポーネントから受け取る場合はイベントメソッドを制御するためのオブジェクト（変数）でないといけないわけです。
+となります。つまり、質問の条件の通り、子コンポーネントから受け取る場合はメソッドを制御するためのオブジェクト（変数）でないといけないわけです。
 なので

イベントを削除

2023/04/20 02:58

投稿

FKM

スコア3640

test CHANGED Viewed

@@ -9,7 +9,7 @@
 ## ２：子コンポーネントからの値を受け取るケース
 対する@clickedは**任意に定義されたプロパティ名で、予約されたイベントとは無関係**です。
-@clicked="addNumber"はv-on:clicked="addNumber"というv:onイベントディレクティブの省略形です。
+@clicked="addNumber"はv-on:clicked="addNumber"というv:onディレクティブの省略形です。
 defineEmitsは任意の子コンポーネントから親コンポーネントに値を送出するためのemitメソッドを生成しており、それを使用する場合、
 **emit('親コンポーネントに送出するためのプロパティ名',送出したい変数)**