Vue.jsコンポーネント

コンポーネント(Component)は、Vue.jsの最も強力な機能の1つです。

コンポーネントは、HTML要素を拡張して、再利用可能なコードをカプセル化できます。

コンポーネントシステムを使用すると、独立した再利用可能な小さなコンポーネントを使用して大きなアプリケーションを構築できます。ほとんどすべての形式のアプリケーションのインターフェイスをコンポーネントツリーに抽象化できます。

次はグローバルコンポーネントを登録するための構文です。

Vue.component(tagName, options)

tagNameはコンポーネント名であり、optionsはオプションで、登録した後、次のメソッドでコンポーネントを呼び出すことができます。

<tagName></tagName>

グローバルコンポーネント

すべてのインスタンスではグローバルコンポーネントを使用できます。

グローバルコンポーネントインスタンス

簡単なグローバルコンポーネントceodataを登録して使用します。

<div id="app">
    <ceodata></ceodata>
</div>
<script>
// 登録
Vue.component('ceodata', {
  template: '<h1>コンポーネント!</h1>'
})
// ルートVueインスタンスを作成する
new Vue({
  el: '#app'
})
</script>

コードの実行結果を確認する

ローカルコンポーネント

インスタンスオプションにローカルコンポーネントを登録して、コンポーネントをこのインスタンスでのみ使用できます。

ローカルコンポーネントインスタンス

簡単なローカルコンポーネントrunoobを登録して使用します。

<div id="app">
	<ceodata></ceodata>
</div>
<script>
var Child = {
  template: '<h1>カスタムコンポーネント!</h1>'
}

// ルートVueインスタンスを作成する
new Vue({
  el: '#app',
  components: {
    // <ceodata> 親テンプレートでのみ使用可能
    ceodata: Child
  }
})
</script>

コードの実行結果を確認する

Prop

Propは、子コンポーネントが親コンポーネントから渡されたデータを受信するためにカスタムプロパティです。

親コンポーネントのデータは、propsで子コンポーネントにデータを渡す必要があり、子コンポーネントは、propsオプションを使用して”prop”を明示的に宣言する必要があります。

Propインスタンス

<div id="app">
	<child message="hello!"></child>
</div>
<script>
// 登録
Vue.component('child', {
  //  propsを宣言する
  props: ['message'],
  // vmインスタンスで“this.message”のように使用できる
  template: '<span>{{ message }}</span>'
})
// ルートVueインスタンスを作成する
new Vue({
  el: '#app'
})
</script>

コードの実行結果を確認する

動的Prop

v-bindを使用してHTMLを式にバインドするのと同様に、v-bindを使用してpropsの値を親コンポーネントのデータに動的にバインドできます。親コンポーネントのデータが変更されるたびに、その変更は子コンポーネントにも伝わります。

Propインスタンス

<div id="app">
	<div>
	  <input v-model="parentMsg">
	  <br>
	  <child v-bind:message="parentMsg"></child>
	</div>
</div>
<script>
// 登録
Vue.component('child', {
  //  propsを宣言する
  props: ['message'],
  // vmインスタンスで“this.message”のように使用できる
  template: '<span>{{ message }}</span>'
})
// ルートVueインスタンスを作成する
new Vue({
  el: '#app',
  data: {
	parentMsg: '親コンポーネントの内容'
  }
})
</script>

コードの実行結果を確認する

次の例では、v-bindディレクティブを使用して、繰り返される各コンポーネントにtodoを渡します。

Propインスタンス

<div id="app">
	<ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
  	</ol>
</div>
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Ceodata' },
      { text: 'Google' },
      { text: 'Yahoo' }
    ]
  }
})
</script>

コードの実行結果を確認する

注意点：propは単一方向でバインディングし、親コンポーネントのプロパティが変更されると、子コンポーネントに伝わりますが、逆方向は行われません。

Propの検証

コンポーネントは、Propの検証要素を指定できます。

Propの検証方法をカスタマイズするために、文字列配列ではなくPropの値に検証するオブジェクトを提供できます。例えば：

Vue.component('my-component', {
  props: {
    // 基本的な型チェック(`null`と` undefined`はすべての型チェックに合格する)
    propA: Number,
    // 複数の可能な型
    propB: [String, Number],
    // 必要な文字列
    propC: {
      type: String,
      required: true
    },
    // デフォルト値付きの数値
    propD: {
      type: Number,
      default: 100
    },
    // デフォルト値付きのオブジェクト
    propE: {
      type: Object,
      // オブジェクトまたは配列のデフォルト値は関数から取得する必要がある
      default: function () {
        return { message: 'hello' }
      }
    },
    // カスタム検証関数
    propF: {
      validator: function (value) {
        // この値は、次のいずれかの文字列と一致する必要がある
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

propの検証が失敗すると、Vue(開発用ビルド)はコンソール警告を生成します。

typeは、次のネイティブコンストラクターにすることができます。