🦓 コンポーネントの基本まとめ
作成日: 2022/01/04
1

年末年始学習分のまとめ

●コンポーネントの定義方法
コンポーネントを定義するには「Vue.componet()」メソッドを使う。
メソッドを実行するとグローバルスコープにコンポーネントを登録したことになる。
以後はどこからでもコンポーネントが利用できるようになる

●Vue.component()の基本構造
Vue.component()メソッドの第二引数はオブジェクト形式になっている。
例1のtemplateオプションだけでなく、new Vue()と同様に様々なオプションを指定できる

●ローカルスコープへの登録
親コンポーネントのcomponentsオプションに子コンポーネントを定義するとローカルスコープとなり、その親コンポーネント以外からは参照できないように制限することができる。

●データの受け渡し(親コンポーネントから子コンポーネント)
データの受け渡しには親と子それぞれに準備が必要。
まず、子が親からデータを受け取るプロパティを決めて、子コンポーネントの「propsオプション」に定義する。

●データの受け渡し(子コンポーネントから親コンポーネント)
子から親へデータを渡す場合、子からは親のテンプレートが見えないので属性を介してデータを渡すことはできない。
そこで、親は子からデータを受け取るためのイベントハンドラを用意し、子は親にデータを渡したいタイミングで親のイベントハンドラを呼び出す方法を探る。
データはイベントハンドラの引数として渡す。