组件:

1.组件名称不推荐出现大写字母

2.Vue.component定义的是全局组件 Vue实例都可以使用

3.data必须是一个函数，返回值必须是一个对象

Vue.component("btn-primary",{
            data(){
                return{
                    count:0
                }
            },
            methods:{
                click(){
                    this.count++;
                }
            },
            template:"<button @click='click'>{{count}}</button>"
        })

组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

  <div id="app">
        <btn-primary></btn-primary>
        <btn-primary></btn-primary>
        <btn-primary></btn-primary>
    </div>

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项

你可以将组件进行任意次数的复用：

<div id="app">
        <btn-primary></btn-primary>
        <btn-primary></btn-primary>
        <btn-primary></btn-primary>
    </div>

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

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

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

VUE组件

组件: