Vue コンポーネント基礎編 -第1章- ~コンポーネントは核である!~

コンポーネント

テンプレート(html)とJavaScriptをセットにして、 機能ごとに分割して管理できるようにする仕組み。
例:headerのセット,mainのセットとして最終的に組み合わせる。

コンポーネントの定義
Vue.componentメソッドでグローバルに登録しすべてのコンポーネントから使用できる。
テンプレート内ではケバブケース<test-component>で記述。
またコンポーネントはルートインスタンスnew Vue()する前に定義する。

ローカルの定義
ローカルとしてコンポーネントのスコープ内だけで使用するには
コンポーネントの定義を特定のコンポーネントcomponentsオプションに定義する。

コンポーネントのオプション
1.データやメソッドを定義できる。
2.dataはオブジェクトを返す関数にする必要がある。
3.テンプレートのルート要素は単一にする必要がある。
4.コンポーネントを複数使用した場合、別々のインスタンスになる。


コンポーネント間の通信

コンポーネントインスタンスはスコープがあり、
スコープ内のデータやメソッドは、thisでアクセスできる。

スコープ外のアクセス、コンポーネント間の連携
1.propsとカスタムイベントを使う(親子間の通信)
2.イベントバスを使う(非親子間)
3.Vuexの状態管理

次回

親子間通信を学ぶ! Vueの利便性をめちゃくちゃ高めます!

参照文献

基礎から学ぶ Vue.js
https://www.amazon.co.jp/基礎から学ぶ-Vue-js-mio/dp/4863542453/