【Vue.js】AtomicDesignでコンポーネント間（親子孫）データのやりとりをする

hisacomです

6月初頭ごろからVue.js とAWSを用いて小規模なWebアプリ開発を行っています。

今回は折角0からの開発で自由な構成が許されているので 「フロント資材はAtomicDesignの考え方に合わせて管理してみたい」と考えていました。

しかし、いざ試してみると親から子へのデータ受け渡しや子から親へのイベント伝搬など初学者にはハードルの高い要素が満載です。 今回は作業中に詰まった部分というシンプルな構成だけ抜き出し、まとめてみます。

完成イメージ

AtomicDesignでコンポーネント間データのやりとり

下に示すのは開発したものを簡略化したものとなります。

今回作成するのはsubmitボタン要素とinput要素のAtoms （孫）
上記2つをまとめたコンポーネントのMolecules（子）
Moleculesを配置するためのPages（親）という構成になっています。
submitボタン要素を押下すると、input要素に入力されている値がAPIで送信されるというイメージです。

難しいと感じたポイント

データの保持やAPI通信はPagesで行うのが良いとされているので

• Pages で保持しているデータをまで
• Atoms で発火したイベントをPages まで

それぞれprops in / events outによって親要素から孫要素、孫要素から親要素まで伝搬していく必要があります。

このデータやイベントの伝搬のイメージが付きにくく大変苦労しました。

意図しているデータの流れ

【inputによるデータの更新】

1. ユーザがinput要素にデータを入力する
   
2. Atomsでの入力イベントを感知し、イベント発生と入力データがPagesまで渡っていく
   
3. Pagesでバインドされたデータが更新される
   
4. Atomsまで更新されたデータがpropsにより渡っていく
   

【submitボタン押下によるイベントの伝搬】

1. ユーザがsubmitボタン要素を押下する
   
2. ボタン押下のイベントがPagesまで伝えられ、PagesでAPI通信が行われる
   

コード

※scssは省略してあります。

Atoms

submitボタン。クリック時に$emitでMoleculesにイベントを伝えます。

v-model="inputText"でv-modelの設定を行います。
コンポーネントの基本 — Vue.js
v-modelの値の変更はcomputedプロパティで監視します。
this.$emit("change", value)でMoleculesにchangeイベントを伝えます。

Molecules

:value="inputValue"でpropsによりAtomsへデータを渡すようにします。
（※Atomsでv-modelを利用するためには:valueの形で渡す必要がありました。）

Pages

全コードは以下より確認できます。 github.com