重读 Vue 官方文档写的笔记。

组件的命名方式

两种命名方式：

• kebab-case：

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

  使用短横线分隔命名时，必须引用这个自定义元素时也使用相同的命名 ，例如 <my-component-name> 。

• PascalCase：

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

  使用首字母大写命名，引用这个自定义元素时两种命名方法都可以使用，如 <MyComponent> 以及 <my-component> 。但是直接在 DOM 种使用时只有 kebab-case 命名有效。

注册组件

全局注册组件

全局注册的组件可以在任何新创建的 Vue 根实例的模版中使用。在所有的子组件中也是如此，子组件中也可以使用全局注册的组件。

🌰 例子：

Vue.component('my-component-a', {
  // options
})
Vue.component('my-component-b', {
  // options
})

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

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

提示

全局注册意味着不管有无使用这个组件，最后使用打包工具（如 webpack） 构建项目时都会被包含在最终构建的结果当中。

局部注册组件

组件可以在一个普通的 JavaScript 中定义。并且在 components 选项中选择要使用的组件。

局部注册的组件在其子组件中不可用。

模块管理组件

一般在项目的 src 创建 components 目录，将每个组件放置在各自的文件中。然后需要在局部注册组件之前，导入要使用的组件到当前的文件中。

🌰 例子：

有已经定义好的组件 ComponentA 和 ComponentB ，在 ComponentC 中导入这两个组件并且局部注册：

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

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

自动导入基础组件

一般许多基础组件需要在各个组件中频繁使用，例如 按钮、输入框、图标等基础组件，这样会导致局部注册组件的列表很长。

可以使用 require.context 全局注册这些组件，然后再应用的入口文件（ src/main.js ） 全局导入这些基础组件的注册。

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

详细参考：vue-enterprise-boilerplate/src/components at main · bencodezen/vue-enterprise-boilerplate (github.com) (opens new window)/ _global.js 全局注册基础组件。

注意

全局注册组件必须要在 Vue 根实例创建（ new Vue ）之间发生。