楽しいだけで十分です

基礎から学ぶ Vue.js CHAPTER5 (コンポーネントで UI 部品を作る)

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


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

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

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

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

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

props down

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

event up

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

propsの型チェック

スロット

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

スコープ付きスロット

  • 子コンポーネントから必要なデータを、コンテンツ提供側に渡す方法
  • 記述方法は、props down の親子が逆転してようなイメージ

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

Mixin

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

WRITTEN BY yinm

I'm a software engineer.