# 全局组件
这些组件是**全局注册的**。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (`new Vue`) 的模板中。
## 代码
```html
<div id="app">
<my-article></my-article>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-article',{
template:`<div>
<h3>这是标题</h3>
<p>段落</p>
</div>`
})
var vm = new Vue({
el:"#app"
})
</script>
```
## 图示
:-: ![](https://img.kancloud.cn/7b/c4/7bc4d3c8865e1408d12f9103e2eedb40_820x498.png)
## 注意事项:
>[danger] 必须先注册才能使用。而且注册要写在实例之前。否则也不能生效。
> 组件名称不可以使用浏览器支持的标签。如:div,article……
## 组件名称大小写(掌握)
**使用 kebab-case(肉串/烤串)**
```
Vue.component('my-component-name', { /* ... */ })
```
使用组件
`<my-component-name>`。
**使用 PascalCase(大驼峰)**
```
Vue.component('MyComponentName', { /* ... */ })
```
使用组件`<my-component-name>` 和 `<MyComponentName>` 都是可接受的。
## 注意事项
>[danger] 尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。