イベントと値を送出する/イベントハンドラをメソッドにした時の、指定した値がどこから入るのか？

Question

Vue公式ドキュメント内での不明点についての質問です

イベントと値を送出する
の項で説明されている

または、イベントハンドラがメソッドの場合:

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

値は、そのメソッドの最初のパラメータとして渡されます:

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}
```

というところなのですが、enlargeAmountの値が1とかそういう指定する部分がないので
どこからそういった値を持ってくるのかわかりません。

ご存知の方がいらっしゃったらご教示いただけますと幸いです。

Answer 1

emitで親コンポーネントの関数を呼び出す時に
emitの第2引数以降を、親コンポーネントの関数に渡すようになっています。

なので、引数を受け取る関数(親コンポーネントで呼び出された関数)が引数の変数名を適当なものにしても問題ありません。

const hoge = 1;
const piyo = fugaFunc(hoge);

console.log(piyo);

function fugaFunc(asgfsda) {
  return asgfsda * 2;
}

これでもconsole.log(piyo);で、2が出力されますよね！

---

現在のインスタンス上のイベントをトリガします。追加の引数はリスナのコールバックファンクションに渡されます。

参考ドキュメント

---

以上より

どこからそういった値を持ってくるのかわかりません。

の回答としては、

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

の0.1がenlargeAmountに相当します。

---

追記(20200929)

ご確認ありがとうございます。

ご記載いただいた内容で概ね間違いないです。

しかし、若干異なる部分があります。

親コンポーネントではenlarge-textに何か変化がないか子を購読しておく。呼び出された際には、

onEnlargeTextというメソッドが動くように仕掛けておく

enlarge-textの変化を購読しているのではなく、
「子コンポーネントがenlarge-textというイベントを出したらonEnlargeTextというメソッドが動くように仕掛けておく」です。

例えば<button>を子コンポーネントと、思うと

<button @click="func">「func」の実行</button>

「buttonというコンポーネントがclickというイベントを出したらfuncというメソッドを動くように仕掛けておく」
に書き換えられます。

ご質問にある、

「emitの第2引数以降を、親コンポーネントの関数に渡す」

ということはemitの第2引数(0.1)を親コンポーネントの関数に渡したので
中身は0.1となる。。。ということなのでしょうか。。

はい。
例えば、以下のように、
「childがtest_eventというイベント出したとき、funcというメソッドは
第1引数に1,第2引数に2,第3引数に3を受け取り動きます。」
でも、第4・第5は未指定なので、undefinedが出力されます。

親コンポーネント
// template
<child @test_event="func" />

//methods
func: function(first, second, third, fourth, fifth) {
  console.log(first);  // => 1
  console.log(second); // => 2
  console.log(third);  // => 3
  console.log(fourth); // => undefined
  console.log(fifth)   // => undefined
}

子コンポーネント
//template
<div>
  <button @click="childFunc" />
</div>
//methods
childFunc:function () {
  this.$emit("test_event", 1, 2, 3);
}

Comments

[mannnakakunn]

ご回答ありがとうございました。咀嚼に時間がかかるタイプでお返事遅くなり申し訳ございませんでした。
ご回答を以下のように解釈しました。

const hoge = 1;
ホゲという値は１だよ

const piyo = fugaFunc(hoge);
ピヨというのは、ホゲという名前の変数を引数にした関数処理の結果が入るよ

console.log(piyo);
ピヨを出力してみると、下に設定した関数の内容(引数*2を返す)に基づいて2が出力されるよ。

function fugaFunc(asgfsda) {
return asgfsda * 2;
}
fugaFuncは引数を2倍にするよ、名前はasgfsdaじゃなくてもいいよ。リプレースホルダ的なものだよ

(子コンポーネントで?)ボタンをテンプレート構文上に記述してemitを通じて親コンポーネントを呼び出す

<button v-on:click="$emit('enlarge-text', 0.1)">
でenlarge-textと0.1が送出される

↓

親コンポーネントではenlarge-textに何か変化がないか子を購読しておく。呼び出された際には、
onEnlargeTextというメソッドが動くように仕掛けておく
<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>

↓

$emitを通じて子から親が呼び出されたので、仕掛けておいた
引数を受け取る関数(親コンポーネントで呼び出された関数)onEnlargeTextを発動

onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}

現在のフォントサイズにenlargeAmountを足したものを返す
ただし(enlargeAmount)はなんて名前でもいいリプレースホルダ的なもの。
この中身については、

「emitの第2引数以降を、親コンポーネントの関数に渡す」
ということはemitの第2引数(0.1)を親コンポーネントの関数に渡したので
中身は0.1となる。。。ということなのでしょうか。。

間違って解釈していたら、すいません。
とりあえず自分は、そのような整理をしてしまいました。

[mannnakakunn]

たびたびの丁寧なご回答ありがとうございます。

ディレクティブの役割＝属性値の「式が変化」した時に、リアクティブに副作用をDOMに適用すること
と理解していました

v-onの場合は購読している「イベントが動き出す」≒「式が変化した」として見ているということですかね。

また違って解釈していたら、すいません。とりあえず自分は、そのような整理をしてしまいました。

[Arice_Banan]

ご確認ありがとうございます。

仰るように、ディレクティブの仕事は「属性値の式が変化したときに、リアクティブに副作用を DOM に適用すること」で間違いありません。

また、v-onについては、

> 要素にイベントリスナをアタッチします。
https://jp.vuejs.org/v2/api/#v-on

とドキュメントには書かれていますので、
v-onは、「ネイティブ DOM イベント 」・「カスタムイベント」にイベントリスナをアタッチしています。

以上より、
> v-onの場合は購読している「イベントが動き出す」≒「式が変化した」
の認識で合っていると思います。