沃呜!铁人倒数3天了，我们离完赛就差一颠点啦，我们今天来讲讲components吧~继续gogogo (｢･ω･)｢

Component简介

Vue component元件，它通常会包含：HTML 元素(template)、绑定的资料(data)、方法(methods)跟侦听(watch)等不同的属性，用法跟 Vue instance相似(像是可复用的Vue Instance，并且我们可以自行取名字)。

Vue 应用程序的使用，主要是以 Vue component元件所组成，而最上层会有一个根节点Root，下面包含Header、 Content 与 side （不同的 component ）形成一棵组件树。

每个 Component 当中的 data 都会是互相独立的，他提供了HTML DOM元素的扩充性，也可以将部分模板、程序码封装起来便於开发者维护及重复使用。

Component使用方式

主要有两种注册方式:Global 全域注册或是Local 区域注册。

全域注册(Global Registration)

如果有元件共用的需求，我们可以用Vue.component来注册一个元件，在注册全域元件时要给予两个参数，分别为「组件名称」及「选项物件」，在下方范例中「组件名称」为 global-component ，「选项物件」则为其後的内容。

<div id="app">
    <global-component></global-component>
</div>

<script>
    Vue.component('global-component', {
        template: `
    <div>
        {{ message }}
    </div>
`,
        data: function () {
            return {
                message: '我是全域注册(σ′▽‵)′▽‵)σ'
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
                
        }
    });
</script>

但全域注册有个缺点，不管我们需不需要使用到这个component，他都会被载入，所以会增加网页载入的时间。

区域注册(Local Registration)

如果这个component不需要共用，我们可以使用局部注册的方式ヽ( ° ▽°)ノ

考量全域注册的缺点，某些特定component注册在需要使用它的元件之中，它是一个选项物件，可以由 components这个选项物件属性载入 Vue instance ，并将定义的components变数挂载在HTML的元素范围内使用。

Component的区域注册可以重复使用，可以在任一个vue Instance用变数定义，但他无法在其他子组件、非局部注册组件中使用。

我们可以用 JavaScript 对象来定义component
然後在 components的options中定义我们想要使用的组件

<div id="app">
    <local-component></local-component>
</div>

<script>
    var local = {
        template: `
    <div>
        {{ message }}
    </div>
`,
        data: function () {
            return {
                message: '我是区域注册σ ﾟ∀ ﾟ) ﾟ∀ﾟ)σ'
            }
        }
    }

    var vm = new Vue({
        el: '#app',
        components: {
            'local-component': local
        }
    });
</script>

区域注册除了用在new Vue instance外，也可以在组件中使用，我们来试着把区域注册的例子放进全域注册里面吧:

 Vue.component('global-component', {
    components: {
        'local-component': local
    },
    template: `
        <div>
            {{ message }}
            <local-component></local-component>
        </div>           
    `,
    data: function () {
        return {
            message: '我是全域注册(σ′▽‵)′▽‵)σ'
        }
    }
})

结果就会像这样，我们可以看到global-component内包含了local-component

来比较一下全域跟区域注册吧ヾ(´︶`*)ﾉ♬

我们在页面上配置app跟app2，两个都让它载入global-component和local-component。
我们现在有 vm 及 vm2 两个instance， 而使用的component有 global-component和local-component， global-component是全域组件，而local-component是区域组件，只有 vm 有注册local-component组件。

<h2>app</h2>
<div id="app">
    <global-component></global-component>
    <local-component></local-component>
</div>
<h2>app2</h2>
<div id="app2">
    <global-component></global-component>
    <local-component></local-component>
</div>

<script>
    var local = {
        template: `
            <div>
                {{ message }}
            </div>
         `,
        data: function () {
            return {
                message: '我是区域注册σ ﾟ∀ ﾟ) ﾟ∀ﾟ)σ'
            }
        }
    }

    Vue.component('global-component', {
        template: `
            <div>
                {{ message }}
            </div>   
        `,
        data: function () {
            return {
                message: '我是全域注册(σ′▽‵)′▽‵)σ'
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
        },
        components: {
            'local-component': local
        }
    });

    var vm2 = new Vue({
        el: '#app2'
    });
</script>

在执行结果中可以看到因为 app2 没有载入区域组件，所以画面中只显示了全域注册的结果,而global-component组件因为是全域组件，所以在任何的instance上都可以使用。

打开控制台可以看到它不知道如何渲染 local-component组件，所以就照原样<local-component></local-component>放在 HTML 上。

参考资料:
重新认识 Vue.js 2-1 元件系统的特性
「Vue.js 学习笔记 Day15」- Vue component 元件基本用法
初探Vue.js 30天:[Day 11] Component 认识元件
Vue.js组件注册
Vue.js组件基础
Vue.js Core 30天屠龙记(第22天): 组件注册