コンポーネントの理解で重要なこと
Vueコンポーネントは再利用可能なVueインスタンスです。
elオプションについて
最上位のVueインスタンスにしか追加できません。
コンポーネントは様々な箇所で利用されるのでelオプションを指定することはできません。
コンポーネントのデータの持ち方
各コンポーネントのみに閉じたデータを保持するために下記のようにdataオブジェクトを返す関数を定義します。例えば、コンポーネントは複数箇所で使用されますが、dataにオブジェクトをそのまま定義してしまうと各コンポーネントでデータが共有されてしまいます。それでは困るのでコンポーネントのデータは関数の戻り値としてデータを返すようにします。
|
1 2 3 4 5 6 7 8 |
Vue.component('language', { template: '<span>Language!</span>', data: function (){ return { language: ['Vue.js','React'] } } }) |
もちろん、Vueインスタンスと同じようにdataをそのまま保持することも可能ですが、その場合全てのコンポーネントのインスタンスでdataオブジェクトが共有されてしまうので注意が必要です。
コンポーネントのスコープについて
コンポーネントのインスタンスは、それぞれ独立したスコープを持っています。
スコープ内のデータや、メソッドには「this」を使用してアクセスすることができます。
他のコンポーネントに対してはどうか
独立したスコープになるので他のコンポーネントのデータやメソッドに直接アクセスすることはできません。
他のコンポーネントと連携するには下記の方法があります。
- propsとカスタムイベントを使った親子間の通信
- イベントパスを使った非親子間の通信
- Vuexを使った状態管理
propsとカスタムイベントを使った親子間の通信
親から子と、子から親でそれぞれやり方が異なります。
親から子
基本的にはpropsを使ってデータのやり取りを行います。
子から親
カスタムイベント（v-on、emitなど）を使ってデータのやり取りを行います。
Vuexを使った通信
storeというオブジェクトに状態を持たせて離れたコンポーネント間の通信を行うことができる手法です。
親子間のpropsなども無くなるのですっきりしたコンポーネントを保つことも可能です。ただ、グローバルな扱いになるので扱いを慎重に行う必要があります。
この記事へのコメントはありません。