Vue 组件注册实例详解

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

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

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

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

<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' })

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

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

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

import ComponentA from './ComponentA.vue'
export default {
 components: {
  ComponentA
 },
 // ...
}

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
 components: {
  ComponentA,
  ComponentC
 },
 // ...
}

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
 components: {
  BaseButton,
  BaseIcon,
  BaseInput
 }
}

<BaseInput
 v-model="searchText"
 @keydown.enter="search"
/>
<BaseButton @click="search">
 <BaseIcon name="search"/>
</BaseButton>

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.replace(/^\.\/(.*)\.\w+$/, '$1')
  )
 )
 // 全局注册组件
 Vue.component(
  componentName,
  // 如果这个组件选项是通过 `export default` 导出的，
  // 那么就会优先使用 `.default`，
  // 否则回退到使用模块的根。
  componentConfig.default || componentConfig
 )
})