组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重组的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任何类型的应用的界面都可以抽象为一个组件树：

每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

以下实例我们将 Vue 应用挂载到 

，应该传入 #app：

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

 注册一个全局组件语法格式如下：

const app = Vue.createApp({...})
app.component('my-component-name', {
  /* ... */
})

 my-component-name 为组件名，/* ... */ 部分为配置选项。注册后，我们可以使用以下方式来调用组件：

 一个简单的 Vue 组件的实例：

全局组件实例

注册一个简单的全局组件 runoob，并使用它：

<div id="app">
    <runoob>runoob>
div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 runoob的新全局组件
app.component('runoob', {
    template: '
自定义组件!
'
})
 
app.mount('#app')
script>

 接下来我们再注册一个 button-counter 组件，在每次点击后，计数器会加 1:

// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      点了 {{ count }} 次！
    button>`
})
app.mount('#app')
script>

 注意：template 中 ` 是反引号，不是单单引号 '。

组件的复用

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

<div id="components-demo">
  <button-counter>button-counter>
  <button-counter>button-counter>
  <button-counter>button-counter>
div>

 全局组件

以上的实例中我们的组件都只是通过 component 全局注册的。

全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。

<div id="app">
    <runoob>runoob>
div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 runoob 的新全局组件
app.component('runoob', {
    template: '
自定义组件!
'
})
 
app.mount('#app')
script>

局部组件

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

注册一个简单的局部组件 runoobA，并使用它：

<div id="app">
    <runoob-a>runoob-a>
div>
<script>
var runoobA = {
  template: '
自定义组件!
'
}
 
const app = Vue.createApp({
  components: {
    'runoob-a': runoobA
  }
})
 
app.mount('#app')
script>