Vue.js
コンポーネント

備考

コンポーネントスコープ（グローバルではない）

デモ

HTML

<script type="x-template" id="form-template">
    <label>{{inputLabel}} :</label>
  <input type="text" v-model="name" />
</script>

<div id="app">
  <h2>{{appName}}</h2>
  <form-component title="This is a form" v-bind:name="userName"></form-component>
</div>

JS

// Describe the form component
// Note: props is an array of attribute your component can take in entry.
// Note: With props you can pass static data('title') or dynamic data('userName').
// Note: When modifying 'name' property, you won't modify the parent variable, it is only descendent.
// Note: On a component, 'data' has to be a function that returns the data.
var formComponent = {
  template: '#form-template',
  props: ['title', 'name'],
  data: function() {
    return {
      inputLabel: 'Name'
    }
  }
};

// This vue has a private component, it is only available on its scope.
// Note: It would work the same if the vue was a component.
// Note: You can build a tree of components, but you have to start the root with a 'new Vue()'.
var vue = new Vue({
  el: '#app',
  data: {
    appName: 'Component Demo',
    userName: 'John Doe'
  },
  components: {
    'form-component': formComponent
  }
});

コンポーネントとは何か、コンポーネントの定義方法は？

Vueのコンポーネントはウィジェットのようなものです。これにより、再利用可能なカスタム要素を目的の動作で書き込むことができます。

それらは、レンダリングするHTMLテンプレートを含む、ルートインスタンスまたは任意のVueインスタンスに含めることができるオプションのすべてまたはすべてを含むことができるオブジェクトにすぎません。

コンポーネントの構成

• HTMLマークアップ：コンポーネントのテンプレート
• CSSスタイル：HTMLマークアップの表示方法
• JavaScriptコード：データと動作

これらは、それぞれ別のファイルに書き込むことも、 .vue拡張子を持つ単一のファイルとして書き込むこともできます。以下は両方の方法を示す例です。

.VUE - コンポーネントの単一のファイルとして

<style>  
    .hello-world-compoment{  
        color:#eeeeee;  
        background-color:#555555; 
    }  
</style>  

<template>
    <div class="hello-world-component">
        <p>{{message}}</p>
        <input @keyup.enter="changeName($event)"/>
    </div>
</template>

<script>
    export default{            
        props:[ /* to pass any data from the parent here... */ ],   
        events:{ /* event listeners go here */},
        ready(){
            this.name= "John";
        },
        data(){
           return{
              name:''
           }
        },
        computed:{
            message(){
                return "Hello from " + this.name;
            }
        },
        methods:{
            // this could be easily achieved by using v-model on the <input> field, but just to show a method doing it this way.
            changeName(e){
                this.name = e.target.value;
            }
        }  
    }
</script>  

別々のファイル

hello-world.js - コンポーネントオブジェクトのJSファイル

export default{
    template:require('./hello-world.template.html'),
    props:[ /* to pass any data from the parent here... */ ],  
    events:{ /* event listeners go here */ },
    ready(){
        this.name="John";
    },
    data(){
        return{
            name:''
        }
    },
    computed:{
        message(){
            return "Hello World! from " + this.name;
        }
    },
    methods:{
        changeName(e){
            let name = e.target.value;
            this.name = name;
        }
    }
}  

hello-world.template.html

<div class="hello-world-component">
    <p>{{message}}</p>
    <input class="form-control input-sm" @keyup.enter="changeName($event)">
</div>  

hello-world.css

 .hello-world-compoment{  
    color:#eeeeee;  
    background-color:#555555; 
}    

これらの例ではes2015構文を使用しているため、旧式のブラウザではes5にコンパイルするためにBabelが必要になります。
Babelは、 Cloudify + vueifyまたはWebpack + vue-loaderとともに、 hello-world.vueをコンパイルする必要があります。

これで、 hello-worldコンポーネントが定義されたので、Vueに登録する必要があります。

これは2つの方法で行うことができます。

グローバルコンポーネントとして登録する
でmain.jsファイル（アプリへのエントリポイント）我々が世界的に任意のコンポーネントを登録することができVue.component ：

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
Vue.component('hello-world', require('./hello-world');  // global registeration

new Vue({
    el:'body',

    // Templates can be defined as inline strings, like so:
    template:'<div class="app-container"><hello-world></hello-world></div>'
});  

または、親コンポーネントまたはルートコンポーネント内でローカルに登録する

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
import HelloWorld from './hello-world.js';  

new Vue({
    el:'body',
    template:'<div class="app-container"><hello-world></hello-world></div>",

    components:{HelloWorld}  // local registeration
});  

グローバルコンポーネントは、Vueアプリケーション内のどこでも使用できます。

ローカルコンポーネントは、登録されている親コンポーネントでのみ使用できます。

フラグメントコンポーネント
自分がフラグメントコンポーネントであるために何かできないことを示すコンソールエラーが表示されることがあります 。この種の問題を解決するには、 <div>ように単一のタグの中にコンポーネントテンプレートをラップするだけです。

コンポーネントのローカル登録

コンポーネントは、グローバルまたはローカル（別の特定のコンポーネントにバインド）のいずれかで登録できます。

var Child = Vue.extend({
    // ...
})

var Parent = Vue.extend({
    template: '...',
    components: {
         'my-component': Child
    }
})

Thiwの新しいコンポーネント（）は、Parentコンポーネントのスコープ（テンプレート）内でのみ使用できます。

インライン登録

1つのステップでコンポーネントを拡張して登録することができます。

Vue.component('custom-component', {
    template: '<div>A custom component!</div>'
})

コンポーネントがローカルに登録されている場合：

var Parent = Vue.extend({
    components: {
        'custom-component': {
            template: '<div>A custom component!</div>'
        }
    }
})

コンポーネントのデータ登録

コンポーネントを登録するときにオブジェクトをdataプロパティに渡すと、コンポーネントのすべてのインスタンスが同じデータを指すようになります。これを解決するには、関数からdataを返す必要があります。

var CustomComponent = Vue.extend({
    data: function () {
        return { a: 1 }
    }
})

イベント

コンポーネントがその祖先/子孫と通信できる方法の1つは、カスタム通信イベントです。すべてのVueインスタンスもエミッターであり、コンポーネントツリー内の通信を容易にするカスタムイベントインターフェイスを実装します。私たちは以下を使用することができます：

• $on ：このコンポーネントの祖先または子孫によって生成されたイベントを待ち受けます。
• $broadcast ：すべての子孫に下向きに伝搬するイベントを発行します。
• $dispatch ：最初にコンポーネント自体をトリガーし、すべての祖先に上向きに伝搬するイベントを発行します。
• $emit ：自分のイベントをトリガーします。

たとえば、フォームが送信されるときにフォームコンポーネント内の特定のボタンコンポーネントを非表示にしたいとします。親要素について：

var FormComponent = Vue.extend({
  // ...
  components: {
    ButtonComponent
  },
  methods: {
    onSubmit () {
        this.$broadcast('submit-form')
    }
  }
})

子要素について：

var FormComponent = Vue.extend({
  // ...
  events: {
    'submit-form': function () {
        console.log('I should be hiding');
    }
  }
})

心に留めておくべきこと：

• イベントがリッスンしているコンポーネントを検出してトリガーされたコンポーネントを検出すると、このコンポーネントの関数コールバックがtrue返さない限り、コンポーネントは伝搬を停止しtrue 。
• $dispatch()は、それを発行したコンポーネントで常に最初にトリガします。
• 任意の数の引数をイベントハンドラに渡すことができます。 this.$broadcast('submit-form', this.formData, this.formStatus)行うとthis.$broadcast('submit-form', this.formData, this.formStatus)この引数にアクセスできます'submit-form': function (formData, formStatus) {}