Vue初心者のメモ2

その１

コンポーネントの基本

名前付きの再利用可能なVueインスタンス
コンポーネントのdataオプションは関数でなければならない→各インスタンスに独立したdataを保持させるため
コンポーネントの登録はグローバルとローカルの２種類がある
全てのコンポーネントに単一のルート要素が必要

子コンポーネントのイベントを購読する

v-onを使って任意のイベントを補足することができる

親コンポーネントでenlarge-textイベントを購読

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1">
</blog-post>

子コンポーネントでは$emitメソッドを使ってenlarge-textイベントを送出する

<button v-on:click="$emit('enlarge-text')">
  enlarge
</button>

イベントと値を送出する

$emitの２番目のパラメータで値を送出できる

<button v-on:click="$emit('enlarge-text', 0.01)">
  enlarge
</button

コンポーネントでv-modelを使うことも可能

公式ドキュメント参照

スロット

<alert-box>
  This is error message.
</alert-box>

Vue.component('alert-box', {
  template: '
    <div>
      <strong>
        <slot></slot>
      </strong>
    </div>'
})

コンポーネントの登録

コンポーネント名は全て小文字でハイフンが含まれている形式が望ましい

Vue-CLI

環境の切り分け
公式ドキュメント