
こんにちは。櫻井です。 最近Vueを使って色々作ろうとしたらVueコンポーネント間のデータの受け渡しの仕方が全く理解できていないことが発覚して困り果てたので今回はその備忘録です。
propsとdataの違い
まず根本的なところでpropsとdataの違いをいまいち把握しきれていませんでした。 これが理解できない状態ではデータのやり取りなんて理解しようもありません。 propsはコンポーネントに与えられた属性の情報を管理するためのプロパティ、 dataはコンポーネント内で使う情報をオブジェクトにして定義するためのプロパティです。
親から子にデータを渡すとき
propsとdataの違いがわかったところで実際に受け渡しの話しをしていきます。 まずは親コンポーネントから子コンポーネントへのデータの受け渡しです。 親から子にデータを渡したいときはv-bindを使って渡します。 v-bindを使うことで属性の値を動的に渡すことができます。 受け取る側の子コンポーネントの方にはpropsを使って受け取るデータを格納することで受け取ったデータを扱えるようにします。。