JavaScript

【Vue.js】子から親コンポーネントのデータを更新する方法

課題を持った人
課題を持った人
子から親コンポーネントのデータを更新する方法を教えてください。$emitってどうやって使ったらいいのかよく分かりません(´_`。)

親コンポーネントから子コンポーネントにデータを渡すには、propsプロパティを使います。詳しくは「【Vue.js】propsを使う時は命名に注意。サンプルコード有」に書きました。

では、反対に子コンポーネントから親コンポーネントのデータを更新するにはどうしたらいいでしょうか。結論から言うと、$emitでイベントをトリガ(きっかけとなるもの)して、v-onディレクティブでイベントを購読することで実現可能です。

文章だけだとよくわからないと思いますので、コードを書きながら子から親コンポーネントのデータを更新する方法を学んでいきましょう。

子から親コンポーネントのデータ更新を実装したサンプルを確認してみよう

子から親コンポーネントのデータ更新を実装して、以下のようなサンプルアプリを作ってみましょう。

簡単に画面の説明をします。「増やす」「減らす」ボタンをクリックすると、RedApple、GreenApple、それぞれの個数が増減します。この数値は子コンポーネントのdataプロパティを参照しています。

さらに、RedAppleとGreenAppleの増減に合わせて合計数が表示されます。こちらの数値は親コンポーネントのdataプロパティを参照しています。

このようなサンプルアプリを使って解説していきます。

子コンポーネント内のdataプロパティを更新する機能を実装しよう

以下の基本テンプレートに機能を追加していきましょう。

Vueインスタンスのdataプロパティの中にfruitsプロパティを作ろう

Vueインスタンスを生成して、dataプロパティの中にfruitsプロパティを作ります。fruitsプロパティにはRedAppleとGreenAppleの情報が入っています。

グローバルにitemコンポーネントを登録しよう

グローバルにitemという名前のコンポーネントを登録します。dataプロパティには、subtotalCountというプロパティを登録しています。subtotalCountでは、RedApple、GreenAppleそれぞれの個数を管理しています。

templateの「増やす」「減らす」ボタンをクリックすると、methodsが呼び出されて、subtotalCountの値が変化します。

itemコンポーネントを使用しよう

itemコンポーネントを<div id=”app”></div>の中に記述して、ブラウザで開いてみてください。RedAppleとGreenAppleの増減ができるようになっていると思います。合計個数はまだ動きません。

子コンポーネントでイベントが発火したら、親コンポーネントのデータが更新される機能を実装しよう

トリガを設定しよう

子コンポーネントのincreaseメソッド(増やすボタン)、reduceメソッド(減らすボタン)が呼び出された時に発火するトリガを設定しましょう。

this.$emit(‘clicked-increase-button’);で「clicked-increase-button」というイベント名のトリガを設定しています。

this.$emit(‘clicked-reduce-button’);で「clicked-reduce-button」というイベント名のトリガを設定しています。

$emitの構文
$emit(イベント名, [引数])

イベントを購読しよう

itemコンポーネントに以下を追加します。

@clicked-increase-button=”incrementTotalCount”

@clicked-reduce-button=”decrementTotalCount”

@clicked-increase-button=”incrementTotalCount”は、子コンポーネントで先ほど設定したthis.$emit(‘clicked-increase-button’);が発火したら、incrementTotalCountメソッドを呼び出してね、という意味です。

@clicked-reduce-button=”decrementTotalCount”も同様です。

これで、RedAppleとGreenAppleの増減に合わせて、合計値も増減するようになったと思います。

コードの全容

コードの全容はJSFiddleでご確認いただけます。URLはこちらです。

筆者
筆者
以上が子コンポーネントで$emitを使ってイベントをトリガして、親コンポーネントでイベントを購読してデータを更新する方法でした。最初は難しい部分もあるかもしれませんが、何度も使って慣れてしまいましょう!