组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体，提高了功能的复用性与可维护性，能更好的专注于业务逻辑。

组件使用时为自定义 HTML 标签形式，通过组件名作为自定义标签名。

<div id="app">
  <!-- 普通 HTML 标签 -->
  <p>p标签内容</p>
  <!-- Vue.js 组件 -->
  <my-com></my-com>
</div>

组件注册

全局注册

全局注册的组件在注册后可以用于任意实例或组件中。

Vue.component('组件名', { /* 选项对象 */ })

注意：全局注册必须设置在根 Vue 实例创建之前。

组件基础

本质上，组件是可复用的 Vue 实例，所以它们可与 new Vue 接收相同的选项，例如 data、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件命名规则：

kebab-case：'my-component’
PascalCase：'MyComponent'

Vue.component('my-component-a', { /* 选项对象 */ }) // kebab-case
Vue.component('my-component-a', { /* 选项对象 */ }) // PascalCase

注意：无论采用哪种命名方式，在 DOM 中都只有 kebab-case 可以使用。

template 选项：

template 选项用于设置组件的结构，最终被引入根实例或其他组件中，template 中可以使用插值表达式等 Vue 语法和指令。

Vue.component('MyComponentA', {
  template: `
    <div>
      <h3>组件 A 的内容标题</h3>
    </div>`
})

注意：组件必须只有一个根元素。

data 选项：

data 选项用于存储组件的数据，与根实例不同，组件的 data 选项必须为函数，数据设置在返回值对象中。

Vue.component('MyComA', {
  template: `
    <h3>{{ title }}<h3>
  `,
  data: function () {
    return {
      title: '示例内容'
    }
  }
})

这种实现方式是为了确保每个组件实例可以维护一份被返回对象的独立的拷贝，不会相互影响。

局部注册

局部注册的组件只能用在当前实例或组件中。

new Vue({
  ...
  components: {
    'my-component-a': {
      template: '<h3>{{ title }}</h3>',
      data () {
        return { title: 'a 组件示例内容' }
      }
    }
  }
})

还可以单独配置组件的选项对象：

var MyComponentA = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'my-component-a': MyComponentA
  }
})

ES6 的对象属性简写：

new Vue({
  el: '#app',
  components: {
    MyComponentA
  }
})

Vue.js - 组件简介和注册