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の利便性をめちゃくちゃ高めます！