はじめに
Vue.jsを利用したフロントエンドの開発を進めていく中で、複雑な機能であったり、反復性を有する機能の開発を行う際、1つのVueコンポーネントで実装するよりも機能の単位、粒度に応じて複数のコンポーネントに分解して実装すると思います。後者の方が、経験上、ソースコードの可読性やメンテナンス性、さらにVue.jsの特徴の一つであるコンポーネントの再利用性も生かすことができるので、大変便利です。 しかしながらこの場合、複数のコンポーネント間でのデータのやり取りというものが必要不可欠になります。開発経験の浅い方の場合、その扱いに最初は悩むことでしょう。
そこで今回は簡単な実装例も交えつつ、Vue.jsの重要な機能の1つである「props」と「emit」について取り上げます。このテクニックに慣れることで開発効率も随分と向上すると思います。ぜひ、マスターしましょう。
コンポーネント間のデータのやり取り
コンポーネント分割を行う際に片方のコンポーネントがもう片方のコンポーネントを取り込み(import)する時、importする側を「親（コンポーネント）」と呼び、される側を「子（コンポーネント）」と呼びます。importにより、親と子は図のように互いがノード（黒い直線）によって結ばれます。しかしこのままでは、親と子は互いのオプション(data, methods, computedなど)の情報や状態を把握・共有することができません。これらを外部のコンポーネントから参照したいとき、明示的な記述が必要になります。特に今回のテーマである「コンポーネント間のデータのやり取り」では「親から子」にdataを伝達する手段「props」、そして「子から親」にdataを伝達する手段「emit」が存在します。それでは下記にそれぞれの概念について述べてまいります。
親から子へ、props
親から子に「data」を伝達したいとき、親側でv-bind(:)を経由してデータを子に流します。バインドしているので、props(プロパティ)の値の変更を検知できます。図のケースではParent.vueからChild1.vue、Child2.vue、Child3.vueに対してデータを渡しており、Child4.vueにはpropsの機能を用いていないことを示しています。ここで子は親からのデータを受け取るとき、配列による列挙形式か、オブジェクトの配列として記述する方法の2種類存在します。後者は、プロパティに対して、型指定やバリデーション等、詳細な設定を指定できます。
|
1 2 3 4 |
<child :param0="item" :param1="value" /> |
まず配列による列挙について紹介いたします。下記のように簡潔に指定できる反面、それぞれのデータの情報が記載されていないため、子では「item」も「value」も同じように扱います。
|
1 |
props: ['item', 'value'] |
こちらはオブジェクトによる列挙になります。こちらの方がより詳細に指定できるため、「item」と「value」の違いついて明記できます。
|
1 2 3 4 5 6 7 8 9 |
props: { item: { type: Object }, value: { type: Number, default: 0 } } |
子から親へ、emit
子から親に対してデータを伝達させたい場合は、カスタムイベントを使用します。カスタムイベントを活用する場合、下記のように$emitと$onが一対として機能します。親コンポーネントから子のイベントを監視したい場合は「v-on:」または「@」によりイベント名（今回の場合「updateEvt」）を紐づけます。図のケースではChild3.vueで発したイベントトリガー$emitによりParent.vueにてそのイベントが$onにより実行される様子を表しています。これをソースコードで示すと次のようになります。
子コンポーネント(Child3.vue)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div class="item"> <span>{{ value }}</span> ＜button @click="updateEvt"＞追加</button> </div> </template> ＜script> export default { data () { return { value: 0 } }, methods: { plusOne () { this.value += 1 this.$emit('updated') } } } ＜/script> |
親コンポーネント(Parent.vue)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> ＜counter @updated="updateEvt" /＞ </template> ＜script＞ import Child from './Child.vue' export default { components: { Child }, methods: { updateEvt () { console.log('The value updated') } } } ＜/script＞ |
また$emitの第2引数、第3引数...と特定の変数を指定することで、子から親に対してその変数の値を受け取ることができます。このとき、受け手である親はイベントと紐づけたメソッドに対して、その引数を指定します。
子コンポーネント(Child3.vue)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div class="item"> <span>{{ value }}</span> ＜button @click="updateEvt＞追加</button> </div> </template> ＜script> export default { data () { return { value: 0 } }, methods: { plusOne () { this.value += 1 this.$emit('updated', this.value) } } } ＜/script> |
親コンポーネント(Parent.vue)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> ＜counter @updated="updateEvt" /＞ </template> ＜script＞ import Child from './Child.vue' export default { components: { Child }, methods: { updateEvt (value) { console.log('The value updated as ' + value) } } } ＜/script＞ |
実装例
ここではpropsやemitを用いた実装例を紹介します。ある生産ラインの生産実績をオペレータが入力する簡易画面を題材とします。オペレータは製品の生産本数を数え上げ、上図の画面に入力します。この時、製造された製品が良品であれば、左側の追加ボタンを押し、不良品であれば右側の追加ボタンを押します。
今回の開発環境はVue CLI(ver3.7)を使用します。Vue CLIを扱うNodeパッケージモジュール「@vue/cli」がインストールされていない場合、まずはこれを追加します。
|
1 |
$ npm install -g @vue/cli |
正しくインストールされたか、バージョンを確認します。
|
1 |
$ vue --version |
新たにプロジェクト名「production-result」を生成します。この時の初期設定はデフォルトとします。
|
1 |
$ vue create production-result |
上記の手順が完了すれば、下準備は完了です。
ソースコード
下記にソースコードとして3つvueコンポーネントを示します。
ProductionResult.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<template> <div class="frame"> <h1 class="title">生産実績画面</h1> ＜sticker :title="'生産実績'" :unit="'本'" :value="good + bad" /＞ ＜sticker :title="'不良率'" :unit="'%'" :value="defectivePercent" /＞ ＜counter :title="'良品'" :unit="'本'" :varName="'good'" @updated="commit" /＞ ＜counter :title="'不良品'" :unit="'本'" :varName="'bad'" @updated="commit" /＞ </div> </template> ＜script> import Sticker from './Sticker.vue' import Counter from './Counter.vue' export default { components: { Sticker, Counter }, data () { return { good: 0, bad: 0 } }, computed: { defectivePercent () { return Number((this.bad / (this.good + this.bad) * 100).toFixed(2)) || 0 } }, methods: { commit (newValue, variable) { this[variable] = newValue } } } ＜/script> <style scoped> #app .frame { width: 500px; height: 550px; background: #ddd; border-radius: 5px; margin: auto; } #app .title { padding: 5px; font-size: 20px; color: #333; border-bottom: solid white 1px; background: #C8C4B7; border-top-left-radius: 5px; border-top-right-radius: 5px; } </style> |
Counter.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<template> <div class="item"> ＜sticker :title="title" :unit="unit" :value="value" /＞ ＜button class="add-button" @click="plusOne" >追加</button> </div> </template> ＜script> import Sticker from './Sticker.vue' export default { components: { Sticker }, props: { title: { type: String }, unit: { type: String }, varName: { type: String } }, data () { return { value: 0 } }, methods: { plusOne () { this.value += 1 this.$emit('updated', this.value, this.varName) } } } ＜/script＞ <style scoped> #app .item { width: 220px; margin: 0px 10px; float: left; } #app .add-button { width: 100px; margin: 10px; padding: 5px; background: #B7C4C8; border-radius: 3px; color: #666; font-size: 20px; border-style: none; } #app .add-button:hover { background: #93A7AC; } </style> |
Sticker.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<template> <div class="item"> <h2>{{ title }}</h2> <p> <span class="value">{{ value }}</span> <span class="unit">[ {{ unit }} ]</span> </p> </div> </template> ＜script> export default { props: { title: { type: String }, value: { type: Number, default: 0 }, unit: { type: String } } } ＜/script> <style scoped> #app .item { border: solid #666 1px; border-radius: 5px; margin: 20px; width: calc(100% - 40px); } #app h2 { font-size: 16px; text-align: left; margin: 0px 10px; } #app .value { font-size: 48px; padding: 0px 10px; } </style> |
それぞれのコンポーネントの関係については下図に示す通りとなります。ここではProductionResult.jsを親として、本数を数え上げるCounter.vueと、値を表示するためのSticker.vueをimportしています。さらにCounter.vueにおいてもSticker.vueを再利用しています。今回はemitとpropsを説明する理由もあり、Sticker.vueの再利用性を意識した設計となります。ただし今回のコンポーネント設計についてはその一例に過ぎず、用途や機能、要件に応じて構造が変化します。
ここでProductionResult.vueはCounter.vueに対して「タイトル（title）」、「表示単位（unit）」、そして「対象とする変数名の文字列指定（varName）」をpropsで渡します。同様にProductionResult.vueおよびCounter.vueからSticker.vueに対して「タイトル（title）」、「表示単位（unit）」、「値（value）」をpropsで渡します。Counter.vueのようにProductionResult.vueからマスタとなる値を受け取り、これらをカスケードしてStricker.vueに値を引き渡すという使い方もできます。
画面操作とコンポーネント間の作用
次に良品の「追加」ボタンを押したときの画面の挙動について説明します。下図に示すとおり、vueファイル間でのデータのやり取りが行われるため、内容が少々複雑な印象を受けるかもしれません。ここで図は動作を説明するための必要分しか記載しておりません。それでは順番に説明します。
「追加」ボタン押下時
- ① 良品の「追加」ボタンを押下します。
- ② 本数を１本カウントする「plusOne」メソッドが作動します。この時、Counter.vueが管理するdata「value」を用います。
- 良品数のカウント
- 不良率の算出
- 良品と不良品の合計値
不良率の算出
- ③ pulsOneメソッド内の$emitによりupdateイベントが実行されます。このとき親となるProductionResult.vueにて良品数「good」の値を確定させるための「commit」メソッドが実行されます。
- ④ commitメソッドにより「good」の値が更新されます。
- ⑤ 「good」の値の変化に伴い、不良率「defectivePercent」が再計算されます。
- ⑥ 再計算された値はStickar.vueの「value」プロパティにより値が伝達されます。
- ⑦ Sticket.vueのvalueの値がテンプレート層で描画されます。
良品数のカウント（'）
- ③'plusOneによりCounter.vueのdata「value」が更新されます。
- ④'Counter.vueのdata「value」はStickar.vueの「value」プロパティにより値が伝達されます。
- ⑤'Sticket.vueのvalueの値がテンプレート層で描画されます。
「良品と不良品の合計値」についても、「不良率の算出」と原理は同様です。
また、$emitを用いずに$parentを用いることで親側のdataに直接アクセスすることができます。 Counter.vueのplusOneメソッドにおいて下記のように記述することができます。
|
1 2 3 4 |
plusOne () { this.value += 1 this.$parent[this.varName] = this.value } |
このように記述することで、ProductionResult.vueにおけるcommitメソッドを省略することができます。
今回のケースでは規模も小さいため、十分に活用する余地があります。 しかし、公式のドキュメントに記述されている見解の通り、$parentや$childrenは非推奨とされています。 これらの多用は大規模開発になるにつれて、どのコンポーネントでどのようにdataが更新されているかという事実が不透明になるためです。 その結果としてコンポーネント間のやり取りにおいて可読性の低下を招いたり、 理解の混乱を引き起こす原因となる可能性があります。 使用には十分に吟味しましょう。 ここで重要なこととして、親がマスタとなるデータ（良品および不良品の数）を保持、管理しているということです。子はあくまで、親に対して受動的に作用する単位機能として見てみましょう。Counter.vueはあくまで数え上げるためのコンポーネントであり、Sticker.vueではpropsで受け取ったタイトルや値を表示するためのコンポーネントです。データは上流となる「親」から下流に至る「子」への一方向に流れていることに注意しましょう。
おわりに
今回はコンポーネント間のデータのやり取りの中でも最も基本的なpropsとemitについて紹介しました。基本的には上記の内容を押さえておけば、データのやり取りについては苦労されないかと思います。データの伝達手段は他にもVuexやlocalStorageなどが存在し、場合や目的によって使い分ける必要があります。これらも学習されることで、より汎用的なデータの伝達が可能になるかと思います。
