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

发布于 2022年 01月 20日 15:15

腾讯服务器

88 / 年

  • 上海/北京/广州...
  • 2核 2G 4M
  • Linux/Windows
新年大优惠

腾讯服务器

425 / 年

  • 上海/北京/广州...
  • 4核 8G 10M
  • Linux/Windows
年度最便宜

腾讯服务器

1249 / 年

  • 上海/北京/广州...
  • 8核 16G 14M
  • Linux/Windows
点击查看

精读 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',{});

自动化全局注册

利用 webpackrequire.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 组件库的注册上。

局部注册

在组件 optionsAPIcomponents 选项中进行指定。

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

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

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

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

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

推荐文章