一、概念
? ? ? ? 首先我们先看一个Vue组件的实例
<div id="app">
<counter></counter>
</div>
<script>
// 定义一个名为 counter 的新组件
Vue.component('counter', {
data: function () {
return {
count: 0
}
},
template: '<button @click="count++">你点击了 {{ count }} 次.</button>'
})
new Vue({ el: '#app' })
</script>
????????组件是可复用的 Vue 实例，且拥有名字，可以作为自定义元素来使用
????????注意:
????????因为组件是可复用的 Vue 实例，所以它们与?new Vue?接收相同的选项，例如?data、computed、watch、methods?以及生命周期钩子等。仅有的例外是像?el?这样根实例特有的选项
二、组件的复用
你可以将组件进行任意次数的复用：
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
</div>
注意：
? ? ? ? 1、当点击按钮时，每个组件都会各自独立维护它的?count。因为你每用一次组件，就会有一个它的新实例被创建。?
? ? ? ? 2、组件内 data 必须为一个函数，如果不是函数，点击一个按钮就可能会影响到其它所有实例。
三、注册组件
? ?1.组件名
?在注册一个组件的时候，我们始终需要给它一个名字。在上面的示例中我们看到:
Vue.component('counter', { /* ... */ })其中 counter 就是我们这个组件的组件名 。组件名就是?Vue.component?的第一个参数。
我们为组件命名时推荐使用?W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)
?2.组件名的大小写
? ? ? ? 我们为组件命名时会有两种情况:
a.?kebab-case (短横线分隔命名)
Vue.component('my-component-name', { /* ... */ })? 当使用 kebab-case 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如?<my-component-name>。
b.?PascalCase?(首字母大写命名)
Vue.component('MyComponentName', { /* ... */ })????????当使用 PascalCase 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说?<my-component-name>?和?<MyComponentName>?都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
3.全局注册
????????到目前为止，我们只用过?Vue.component?来创建组件：
Vue.component('my-component-name', { /* ... */ })?这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。例如:
Vue.component('btn-a', { /* ... */ })
Vue.component('btn-b', { /* ... */ })
Vue.component('btn-c', { /* ... */ })
new Vue({ el: '#app' })<div id="app">
<btn-a></btn-a>
<btn-b></btn-b>
<btn-c></btn-c>
</div>在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
4.局部注册
????????全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
var A = { /* ... */ }
var B = { /* ... */ }
var C = { /* ... */ }然后在?components?选项中定义你想要使用的组件：
new Vue({
el: '#app',
components: {
'a':A,
'b':B,
'c':C,
}
})注意? ?局部注册的组件在其子组件中不可用。例如，如果你希望?A?在?B?中可用，则你需要这样写：
var A = { /* ... */ }
var B = {
components: {
'a': A
},
// ...
}