一、元件的全域性註冊和區域性註冊

<div id="app">
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component',{
        template:'<div>這是元件的內容</div>'
    });
    var app = new Vue({
        el:'#app'
    })
</script>

其中，‘my-component’是自定義的標籤名稱，推薦使用小寫加上減號的形式書寫。

要在父類例項中使用這個元件，必須在例項建立之前註冊。

template的DOM結構必須被一個元素包含，不能直接寫成“這是元件的內容”。不然無法被渲染。

二、區域性註冊

在Vue例項中，使用components選項可以註冊區域性註冊元件，註冊後的元件只有在該例項的作用域下有效。

<div id="app">
    <my-component></my-component>
</div>
<script>
    var Child = {
        template:'<div>區域性元件註冊</div>'
    };
    var app = new Vue({
        el:'#app',
        components:{
            'my-component':Child
        }
    })
</script>
 

元件中還可以像Vue的其他例項一樣使用其他的選項，比如data、computed、methods等。但是在使用data時，和例項有區別，data必須是函式，將資料return出去。

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script>
    var data = {
        counter:0
    };
    Vue.component('my-component',{
        template:'<button @click="counter++">{{counter}}</button>',
        data:function () {
            return data;
        }
    });
    var app = new Vue({
        el:'#app'
    })
</script>
 

這裡罪案一共使用了三次，但是點選任意一個<button>，3個數都會加1，這是因為元件引用的是外部的物件，下面是給元件返回一個新的data物件來獨立

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script>
    //全域性註冊
    Vue.component('my-component',{
        template:'<button @click="counter++">{{counter}}</button>',
        data:function () {
            return {
                counter:0
            };
        }
    });
    var app = new Vue({
        el:'#app'
    })
</script>

三、使用props傳遞資料

父元件正向的向子元件中傳遞資料或者引數，子元件接收到後根據引數的不同執行不同的內容或執行操作，並把它在元件模板中渲染。

<div id="app">
    <my-component message="來自父元件的資料"></my-component>
    <my-component message="來自父元件的資料"></my-component>
    <my-component message="來自父元件的資料"></my-component>
</div>
<script>
    //全域性註冊
    Vue.component('my-component',{
        props:['message'],
        template:'<div>{{message}}</div>'
    });
    var app = new Vue({
        el:'#app'
    })
</script>

要傳遞多個引數的時候，只需要在props數組裡新增引數即可。

<div id="app">
    <my-component message="來自父元件的資料" warnning-text="haha"></my-component>
    <my-component message="來自父元件的資料"></my-component>
    <my-component message="來自父元件的資料"></my-component>
</div>
<script>
    //全域性註冊
    Vue.component('my-component',{
        props:['message','warnningText'],
        template:'<div>{{warnningText}} {{message}}</div>'
    });
    var app = new Vue({
        el:'#app'
    });
</script>

由於HTML特性不區分大小寫，當使用DOM模板時，駝峰命名 （camelCase ）的 props 名稱
要轉為短橫分隔命名 （ kebab-case ）

傳遞的資料不一定是直接寫死的，而是來自父級的動態資料，這時候可以使用v--bind指令來繫結動態資料props的值，當父元件的資料變化的時候，也會傳遞給子元件。

<div id="app">
    <input type="text" v-model="parentMsg"/>
    <my-component :message="parentMsg"></my-component>
</div>
<script>
    //全域性註冊
    Vue.component('my-component',{
        props:['message'],
        template:'<div>{{message}}</div>'
    });
    var app = new Vue({
        el:'#app',
        data:{
            parentMsg:''
        }
    });