局部注册

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

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

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

然后在 components 选项中定义你想要使用的组件：

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

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

注意局部注册的组件在其子组件中 不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

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

或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

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

注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

• 用在模板中的自定义元素的名称
• 包含了这个组件选项的变量名

文件布局

hzhComponent.vue

<template>
  <h3>黄子涵</h3>
</template>
 
<script>
export default {
    
}
</script>
 
<style>
 
</style>

hcqComponent.vue

<template>
  <h3>黄春钦</h3>
</template>
 
<script>
export default {
 
}
</script>
 
<style>
 
</style>

clyComponent.vue

<template>
  <h3>陈兰英</h3>
</template>
 
<script>
export default {
 
}
</script>
 
<style>
 
</style>

App.vue

<template>
  <hzh-component></hzh-component>
  <hcq-component></hcq-component>
  <cly-component></cly-component>
</template>
 
<script>
import hzhComponent from './components/hzhComponent.vue';
import hcqComponent from './components/hcqComponent.vue';
import clyComponent from './components/clyComponent.vue';
 
export default {
  name: "App",
  components: {
    hzhComponent,
    hcqComponent,
    clyComponent,
  }
}
</script>
 
<style>
</style>

效果