## 一:全局注册
```
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`的模板中使用了。
