Vue.js コンポーネント

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

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

コンポーネントシステムにより、独立した再利用可能な小さなコンポーネントを使って大規模なアプリケーションを構築できます。ほぼすべての種類のアプリケーションのインターフェースは、コンポーネントツリーとして抽象化できます：

グローバルコンポーネントを登録する構文形式は次のとおりです：

Vue.component(tagName, options)

tagName はコンポーネント名、options は設定オプションです。登録後、次の方法でコンポーネントを呼び出すことができます：

<tagName></tagName>

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

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

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

簡単なグローバルコンポーネントサンプルを登録して、それを使用します：

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

試してみる »

ローカルコンポーネント

インスタンスオプションでローカルコンポーネントを登録することもできます。この場合、コンポーネントはこのインスタンス内でのみ使用できます：

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

簡単なローカルコンポーネントサンプルを登録して、それを使用します：

<div id="app"> <サンプル></サンプル> </div> <script> var Child = { template: '<h1>カスタムコンポーネント!</h1>' } // ルートインスタンスを作成 new Vue({ el: '#app', components: { //<サンプル>親テンプレートでのみ利用可能 'サンプル': 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>' }) // ルートインスタンスを作成 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>' }) // ルートインスタンスを作成 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: 'サンプル' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>

試してみる »

注意: prop は単方向バインディングです。親コンポーネントの属性が変化すると、その変化は子コンポーネントに伝わりますが、逆方向には伝わりません。

Prop 検証

コンポーネントは props に検証要件を指定できます。

prop の検証方法をカスタマイズするには、props の値に文字列配列ではなく、検証要件を持つオブジェクトを指定できます。例：

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 には次のネイティブコンストラクタを指定できます：

String
Number
Boolean
Array
Object
Date
Function
Symbol

type にはカスタムコンストラクタを指定することもでき、instanceof で検出されます。

その他の拡張