Vue.js における Component 間のデータの受け渡しまとめ - Qiita

Overview Vue.js を使っていて、この Component 間の関係だとどうやって data 渡すんだっけな...？ となることが多いので方法はいろいろあると思いますが、自分がよくやるやり方をこの記事にまとめておきます。 (他にもこんなやり方あるよ！という知見ありましたら教えていただけますと幸いです ) 親 → 子 親 Component から 子 Component へのデータの受け渡しは、 親 Component で data を v-bind して、子 Component で props で data を引き取ります。 Sample Code Parent.vue ( v-bind で data を渡す) <template> <div id="parent"> <child v-bind:messageFromParent="this.message" /> </div