最近は、基礎から学ぶ Vue.jsを読んで、Vueを勉強してます。読書メモをつけていたので、こちらにぺたり。

---

コンポーネントオプション

• 基本はルートコンストラクタ(new Vue())と同じ
• ただし、 data が オブジェクトを返す関数 でなければならない

コンポーネント間のデータを共有する方法 (3種類)

• props downとevent upを使った親子間の通信
• イベントパスを使った非親子間の通信
• Vuexを使った状態管理

propsとカスタムイベントを使った親子間の通信

props down

• 親 -> 子 の流れ
• 属性 で渡して、 props で受け取る

event up

• 子 -> 親 の流れ
• $emit で渡して、 on で受け取る

propsの型チェック

• propsの型チェックの一覧表

スロット

• 親コンポーネントから子コンポーネントのテンプレートの一部を差し込む機能
• スコープはコンテンツ提供側(= 親コンポーネント)のスコープが維持される

スコープ付きスロット

• 子コンポーネントから必要なデータを、コンテンツ提供側に渡す方法

• 記述方法は、props down の親子が逆転してようなイメージ

  • 子: slotタグの属性に、親に渡したいデータを定義する
  • 親: slot-scope属性で子から受け取る変数名を適当に定義(e.g. props)し、変数名.子で指定した属性とするとデータにアクセスできる(e.g. props.text)

Mixin

• コンポーネントのコンストラクタのオプションを抜き出して、コンポーネントに混ぜ込む機能
• mixins: ${mixinを定義した変数名} のオプションをコンポーネントに追加することで利用できる