欧欧欧，竟然已经到第29天了，时间真的是咻咻咻就过了呢!明天就要结束了，真是感伤(☍﹏⁰) (解脱了ε٩(๑> ₃ <)۶з)
今天跟昨天一样来讲讲components啦~但components能学得真的太多了，两篇实在还是讲不完(绝对不是我懒ㄛ)，所以今天先给大家举个小例子，剩下的用法属性大家就去Vue.js官网看看吧，那我们继续gogogoヽ(✿ﾟ▽ﾟ)ノ

component的建立

我们可以使用Vue.component来注册组件，因为组件是可复用的Vue instance，所以跟new Vue一样使用选项物件(options)设定组件的定义，但el属性定义挂载目标只有new Vue可以使用(因为它是根节点)，所以组件需要使用template或是render函数设定目标模板。

<div id="app">
    <button-counter></button-counter>
</div>

<script>
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">你点了我 {{count}} 次─=≡Σ((( つ•̀ω•́)つ</button>'
    })
        
    var vm = new Vue({
        el: '#app',
        data:{

        }
    });
</script>

在这里我们注册一个叫做button-counter的组件，这个组件的模板是定义在 template上的button，button上有设定一个click事件，按钮按下去会使组件里设定的资料属性 count 加一。

这边我们用的component是全域注册，所以只要在new vue挂载的DOM元素中使用注册组件时设定的名称button-counter就可以在HTML上把组件挂在到目标位置上罗( ～'ω')～
结果会像这样!

组件的复用

在同个 Vue instance中，我们可以同时使用多个相同的组件，像下面这样:

<div id="app">
    <button-counter></button-counter>
    <br/>
    <button-counter></button-counter>
    <br/>
    <button-counter></button-counter>
</div>

这样我们就会有三个按钮出现在画面上了，他们每个都有自己独立的实体属性，像是count，所以按下按钮增加的次数就只有那个组件本身，其他的组件不会跟着改变。
来看看结果╰(°▽°)╯

data必须是个函数

当我们定义<button-counter>组件时，会发现它的data不是像在vue instance中一样直接提供一个object:

data: {
  count: 0
}

在component中，它的data必须是一个函数，这样每个instance才可以维护自己返回的object:

data: function () {
  return {
    count: 0
  }
}

如果Vue中没有这条规则的话，每个按钮都会影响到其他的按钮:

透过 Prop 向子组件传递数据

Prop是让我们可以在组件上注册的一些自定义的attribute。当一个值传递给一个prop attribute的时候，它就变成了那个组件实例的一个property。
在这边我们可以试着帮我们的按钮加上标题，用一个props option定义一个title属性，我们可以在模板内进行应用及渲染，像在这边我们把这个title加在” 你点了我 {{count}} 次─=≡Σ((( つ•̀ω•́)つ”的前面:

Vue.component('button-counter', {
    props:['title'],
    data:function () { 
        return {
            count: 0
       }
    },
    template: '<button v-on:click="count++">{{title}}你点了我 {{count}} 次─=≡Σ((( つ•̀ω•́)つ</button>'
})

在按钮这边我们可以加上属性对应的内容:

<div id="app">
    <button-counter title="1. "></button-counter>
    <br/>
    <button-counter title="2. "></button-counter>
    <br/>
    <button-counter title="3. "></button-counter>
</div>

就可以看到这个title属性生效了!

组件的结构限制

任何的 Vue instance，包括new Vue及component，因为render函数使用上的限制，它们的根元素只能有一个，因此如果想要在组件中有两个以上的元素时，要使用一个包装用元素包住多个元素才能使用。

举例来说，如果我们在刚刚例子的template中增加一个<h1>叫做yoyoyo:

template: '<h1>yoyoyo</h1><button v-on:click="count++">{{title}}你点了我 {{count}} 次─=≡Σ((( つ•̀ω•́)つ</button>'

结果页面上会只剩下yoyoyo，我们的按钮们就不见了:

这时候我们使用<div>将两个组件包裹起来!按钮就可以正常渲染了欧(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧这样我们就可以在同一个模板内使用多个HTML标签的效果!

template: '<div><h1>yoyoyo</h1><button v-on:click="count++">{{title}}你点了我 {{count}} 次─=≡Σ((( つ•̀ω•́)つ</button></div>'

我竟然到第29天才学会怎麽把GIF放到贴文里面，真的是太没用ㄌ(｡T ω T｡)不过结束前还是有用到，也算可喜可贺✧*｡٩(ˊᗜˋ*)و✧*｡感谢已完赛的Zero皇教学(　ﾟ∀ﾟ) ﾉ♡

参考资料:
Vue.js Core 30天屠龙记(第20天): 组件基础
第12节 组件基础