こんにちは。JJです。 久しぶりの投稿になります。 今回はVue.jsにおけるコンポーネント間のデータのやり取りについて紹介していきます。 はじめに Vue.jsを利用したフロントエンドの開発を進めていく中で、複雑な機能であったり、反復性を有する機能の開発を行う際、1つのVueコンポーネントで実装するよりも機能の単位、粒度に応じて複数のコンポーネントに分解して実装すると思います。後者の方が、経験上、ソースコードの可読性やメンテナンス性、さらにVue.jsの特徴の一つであるコンポーネントの再利用性も生かすことができるので、大変便利です。 しかしながらこの場合、複数のコンポーネント間でのデータのやり取りというものが必要不可欠になります。開発経験の浅い方の場合、その扱いに最初は悩むことでしょう。 そこで今回は簡単な実装例も交えつつ、Vue.jsの重要な機能の1つである「props」と「emit」
![【Vue.js】【図解】emit、propsを使ったコンポーネント間のデータのやり取り | CCT blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/2641c85347148392a2bb25025827d569151582e0/height=288;version=1;width=512/https%3A%2F%2Fblog2.cct-inc.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F05%2Fimage11603.png)