こんにちは。櫻井です。 最近Vueを使って色々作ろうとしたらVueコンポーネント間のデータの受け渡しの仕方が全く理解できていないことが発覚して困り果てたので今回はその備忘録です。

propsとdataの違い

まず根本的なところでpropsとdataの違いをいまいち把握しきれていませんでした。 これが理解できない状態ではデータのやり取りなんて理解しようもありません。 propsはコンポーネントに与えられた属性の情報を管理するためのプロパティ、 dataはコンポーネント内で使う情報をオブジェクトにして定義するためのプロパティです。

親から子にデータを渡すとき

propsとdataの違いがわかったところで実際に受け渡しの話しをしていきます。 まずは親コンポーネントから子コンポーネントへのデータの受け渡しです。 親から子にデータを渡したいときはv-bindを使って渡します。 v-bindを使うことで属性の値を動的に渡すことができます。 受け取る側の子コンポーネントの方にはpropsを使って受け取るデータを格納することで受け取ったデータを扱えるようにします。。

上の例では子コンポーネントのAddMessage.vueのaddボタンをクリックするとdoActionが発火⇨this.$emit(“result-event”, this.input);でresult-eventが動いて親コンポーネントであるHelloWorld.vueに定義されているresultMessageに引数を渡して発火する流れになります。 受け取った後の処理はresultMessageに書くことになります。

まとめ

これを踏まえて次回はVueでToDoリストを作成してみたいと思います。 codesandboxを今回初めて使ったんですがこれすごい便利ですね。 codePenだと複数ファイルのデモの作り方ができなそうだったのですごい助かりました。