コンポーネントの基本

vue.jsフレームワーク

  1. HOME
  2. コンポーネント

コンポーネントの定義

Vue.component()メソッドを実行するとグローバルスコープを登録したことになり、以後どこからでも利用できるようになります。

Vue.component('コンポーネントの名前',{コンポーネントのオプション});

コンポーネント登録の注意点
コンポーネントを読み込む順番に注意
Vue.filter()と同様にVue.component()などのグローバルメソッドはnew Vue()よりも先に実行しなければなりません。HTMLの読み込み順番に注意しよう。

コンポーネントのdataオプション
{プロパティ名:値}形式のオブジェクトを返す関数として定義しなければならない

templateオプションの制限事項
・コンポーネントのテンプレートは単一のタグで囲まなければならない
・<template>タグで囲むことは不可

テンプレートを見やすく記述
テンプレート全体を「``」バッククォートで囲むと、テンプレート内で改行を含めることが出来ます

コンポーネントを登録するスコープ
・グローバルスコープに登録する場合はVue.component()メソッド
・ローカルスコープに登録する場合は親コンポーネントのcomponentsオプションを使う

親から子へデータを渡す手順
親:渡したいデータを子のカスタムタグの属性に指定する
子:親から受け取りたい属性名をpropsオプションに定義する

HTMLコンテンツの制限
・HTMLの使用により、多くのHTML要素は配置できる子要素に制限がある
・制限のためカスタムタグが配置できない場合はis属性を使う

データの受け渡し

子コンポーネントから親コンポーネントへデータを渡す際は、親は子からデータを受け取る為のイベントハンドラを用意し、子は親にデータを渡したいタイミングで親のイベントハンドラを呼び出す方法を採る。
データはイベントハンドラの引数として渡す。

$emit('発生させたいイベント名' , イベントハンドラに渡すデー,,,,);
※データを渡す必要がない場合は2つ目以降の引数を省略できる

子から親のイベントハンドラ呼び出し

子の「値下げする」ボタンをクリックするたびに親のpriceが100づつ減少します。
priceはv-bindでこのカスタムタグにバインドしているのでクリックするたびに子のDOMが更新されます。

親のテンプレート

<div id="app">
<my-product v-on:child-click="priceDown" v-bind:price="price"></my-product>
</div>

子コンポーネント

Vue.component('my-product', {
  template: `
  <div>
    <button v-on:click="clickHandler">値下げする</button>{{price}}(円)
  </div>`,
  props: ['price'],
  methods: {
    clickHandler: function () {
      this.$emit('child-click');
    }
  }
})

親コンポーネント

var app = new Vue({
  el: '#app',
  data: {
    price: 990
  },
  methods: {
    priceDown: function () {
      this.price -= 100;
    }
  }
});

コンポーネントのイベントハンドリング

v-onディレクティブに.native修飾子を使用すると、子コンポーネントのどこをクリックしてもイベントが発生するようになります。
その場合はカスタムイベントを実装しなくてよい。ただし、子の特定の部分だけにイベントを発生させたい場合はこの方法は使えないので、$emit()を実装する必要がある!!