1x0 精读Vue官方文档 - 组件注册

精读 Vue 官方文档系列 🎉

组件命名

组件命名方式有两种：

• kebab-case : 短横线分隔命名(烤肉串式)，字母全小写，单词与单词之间用“连字符”链接。
• PascalCase : 驼峰命名法(camelCase)中的大驼峰，既首字母大写。

最佳实践中，我们 推荐 “组件文件名”、“组件名(组件 name 选项)”采用 PascalCase 命名法；而在 Vue 模板中引入的自定义组件元素则采用 kebab-case 命名法。

MyComponent.vue #组件文件的命名采用 PascalCase

export default {
    name:'MyCompoent' //组件名采用 PascalCase
}

<!--在模板中引入自定义元素时采用kebab-case-->
<my-component></my-component>

Vue 也支持在模板（字符串模板，非直接 DOM）中使用 PascalCase 命名的自定义元素。

<MyComponent></MyComponent>

为什么我们强烈推荐采用 kebab-case 方式命名的自定义元素？原因也主要有两点：

• 从浏览器方面，浏览器对字母大小写不敏感，作为普通 HTML 标记，如果里面有大写字母都会被浏览器转换为小写。
• 从规范方面，W3C 规范要求采用 kebab-case 的方式作为自定义组件的标签名。

组件注册

全局注册

Vue.component('my-component',{});

自动化全局注册

利用 webpack 的 require.context() 特性。

const upperFirst from 'lodash/upperFirst';
const camelCase from 'lodash/camelCase';
const components = require.context('./components', false, /My[A-Z]\w+\.(vue|js)$/);
const componentName = [];

components.keys().forEach(fileName => {
    const componentModule = components[fileName];
    const componentName = upperFirst(camelCase(fileName('/').pop().replace(/\.\w+$/,'')));
    //批量注册全局组件
    Vue.component(componentName, componentModule.default || componentModule)
})；

这种方式被更多的用在 UI 组件库的注册上。

局部注册

在组件 optionsAPI 的 components 选项中进行指定。

{
    components:{
        'my-component-a':MyComponentA,
        MyCompnentB
    }
}

局部注册的组件只对当前组件有效，局部注册不支持被继承。

如果你使用诸如 webpack 之类的构建工具，那么你也可以进行模块化的局部注册。

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

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