深入了解组件：01组件注册

一、组件注册：

　　1、组件名：

　　　　在注册一个组件的时候，我们始终需要给它一个名字。比比如在全局注册的以后我们已经看到：

<!-- 此处 my-compinnt-name 就是组件名 -->
Vue.component('my-component-name', { /* ... */ })

　　　　该组件名就是 Vue.component 的第一个参数；

　　　　在为组件取名时，取决与你打算拿它用来做什么。当之间在 DOM 中使用一个组件(而不是在字符产模版或单文件组件) 的时候，推荐遵循 W3C 规范中搞得自定义组件名 (字母全小写且必须包含一个连字符），这会帮助你避免和当前以及未来的 HTML 元素相冲突。

　　　　组件名大小写：

　　　　　　使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

　　　　　　当使用 kebab-case (短横线分隔命名) 定义一个组件是，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

　　　　　　使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

　　　　　　当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。尽管如此，直接在 DOM 中使用时只有 kebab-case 是有效的。

　　2、全局注册：

　　　　我们只使用过 Vue.component 来创建组件：

Vue.component('my-component-name', {
  // ... 选项 ...
})

　　　　这种创建方式是 全局注册 的。也就是说它们在注册之后就可以用在任何创建的 Vue 根实例 (new Vue) 的模版中。例如：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

　　　　在所有子组件也是如此，可以在各自组件内部相互使用；

　　3、局部注册：

　　　　全局注册往往是有些局限性的。比如你是用哟个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不在使用一个组价了，它任然会被包含在你最终的构建结果中。这造成了用户下载的 JS 的无谓的增加。

　　　　在这种情况下，你可以通过一个普通的 JS 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

　　　　然后在 componnents 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

　　　　对于 components 对象中的每个 property 来说， property 名其实就是自定义元素的名字，其 property 值就是这个组件的选项对象；

　　　　还有一个和 全局注册 不一样的是，局部注册的组件在其子组件中不可用。例如，你想 ComponentA 在 ComponentB 中使用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

　　或者 通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

　　　　此处注意：在 ES2015+中，在对象中放一个类似与 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

　　　　　　1、用在模版中的自定义元素的名称；

　　　　　　2、包含了这个组件选项的变量名；