vue之组件注册

一、组件名

　　写组件之前你要明确你的目的，想要做一个什么样的组件，我们在注册一个组件的时候，需要给组件一个名字，对于命名，尽可能明确，使用 kebab-case (短横线分隔命名) 或 PascalCase (首字母大写命名)。

　　使用 kebab-case (短横线分隔命名) 定义一个组件时，我们在引用这个自定义元素时其格式 ：

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

　　使用 PascalCase (首字母大写命名) 定义一个组件时，我们引用这个自定义元素时，其格式有两种，不过有时这种命名的组件在调用时候，会自动解析成短横线分割命名。

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

二、全局注册

　　组件全局注册后，可以在任何新创建的Vue根实例的模板中使用。

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

三、局部注册

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

四、在模板系统中局部注册

　　目前学习vue都是用webpack构建的，对于一个网址各组件应该怎么构造分配还是不够熟悉。

我们在不同组件中复用其他组件，需要在局部注册之前导入每个你想使用的组件。

例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中，我们需要使用ComponentA和ComponentC，那么我们需要import，同时在 components 选项中定义你想要使用的组件。

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

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

五、基础组件的自动化全局注册（还未实际应用过）

之前写的父子组件都不是基础通用的组件，如果我设计了很多button类，input类的只包含这种单个元素，在不同组件里频繁的使用，那么就会造成有一些组件中会有很多包含基础组件的长列表，会很冗杂。

如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。