## 一:全局注冊
```
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
```
通過使用`Vue.component`方法注冊的組件就是全局注冊,在根實例中的任何地方都可以使用:
~~~
<div id="app">
<button-counter></button-counter>
</div>
~~~
~~~
new Vue({ el: '#app' })
~~~
## 二:局部注冊
在局部注冊之前導入每個你想使用的組件。例如,在一個假設的`ComponentB.vue`文件中:
~~~
//導入ComponentA 組件和ComponentC 組件
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
//注冊組件ComponentA和ComponentC,即可在當前組件中使用
components: {
ComponentA,
ComponentC
},
// ...
}
~~~
現在`ComponentA`和`ComponentC`都可以在`ComponentB`的模板中使用了。