Vue コンポーネントクライマックス編 -第3章- ~Vueマスター！~

スロットは親から子コンポーネントにテンプレートの一部を差し込む機能で
コンテンツやテンプレートの一部をカスタマイズする際に使用する。

デフォルトスロット

HTML
<parent>埋め込みたいもの</parent>

HTML
<div class="child">
<slot>埋め込まれる場所</slot> ->このまま実装すると[埋め込みたいもの]がはいる
</div>

名前付きスロット
複数のスロットを使用するときは、親と子のタグにslot=名前で名前をつけて使用する。

スコープ付きスロット
スロットはコンテンツ定義側のスコープが維持されるので、
子側のスコープにアクセスができない。
そんなときはslot-scopeを使い、
コンテンツの定義に必要なデータを子コンポーネントから取得する。

おさらい
双方向データバインディングとは
v-modelでフォームの入力値を同期させて表示させる。
コンポーネント版ではv-modelとprops、$emitを駆使する。

.sync
.sync修飾子では複数の属性を同期させることが可能。
$emitがトリガとなる。

templateオプション
templateオプションに直接かく。
単一ファイルコンポーネントを使用しない場合に推奨。

単一ファイルコンポーネント
コンポーネント単位でJavaScriptとHTMLとCSSをセットにして.vue拡張子のファイルに書く。
独自フォーマットでビルド環境が必要。中規模開発以上で推奨。

描画関数
正確にはテンプレートではないが、DOMを構築するための方法。
仮想DOMについて深く理解する必要がある。難易度が高め。

関数型コンポーネント
ライフサイクルや監視が行われないためパフォーマンスを最適化できる。
functionalオプションを付与することで、状態とインスタンスを持たない。
propsを使えるためデータは使えないが有効になる。

動的コンポーネント
コンポーネントの切り替えができる。
属性isを使用する。

Mixin
複数のコンポーネントの同一処理を行なっている場合、
オプションを抜き出して共通処理を行う。

コンポーネントのライフサイクル
要素が切り替わるタイミングでインスタンスが破棄され、初期化されるので注意。

keep-alive

組み込みコンポーネント<keep-alive>を使用すると、
破棄されず、コンポーネントと状態を維持される。