こんにちは。JJです。 久しぶりの投稿になります。 今回はVue.jsにおけるコンポーネント間のデータのやり取りについて紹介していきます。 はじめに Vue.jsを利用したフロントエンドの開発を進めていく中で、複雑な機能であったり、反復性を有する機能の開発を行う際、1つのVueコンポーネントで実装するよりも機能の単位、粒度に応じて複数のコンポーネントに分解して実装すると思います。後者の方が、経験上、ソースコードの可読性やメンテナンス性、さらにVue.jsの特徴の一つであるコンポーネントの再利用性も生かすことができるので、大変便利です。 しかしながらこの場合、複数のコンポーネント間でのデータのやり取りというものが必要不可欠になります。開発経験の浅い方の場合、その扱いに最初は悩むことでしょう。 そこで今回は簡単な実装例も交えつつ、Vue.jsの重要な機能の1つである「props」と「emit」