第13节 组件注册

全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。建议使用局部注册。

<div id="app">
    <button-counter></button-counter>
    <test></test>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('button-counter', {//全局注册，在new Vue实例之前用Vue.component('MyComponentName', { /* ... */ })创建
    props: ['title'],
    data: function () {
        return {}
    },
    template: '<div><h1>hi...</h1></div>',
    methods:{
    }
})
var vm = new Vue({
    el : "#app",
    data : {
    },
    methods:{
        clicknow : function (e) {
            console.log(e);
        }
    },
    components:{
        test : {//局部注册
            template:"<h2>h2...</h2>"
        }
    }
});

模块系统中局部注册

开发过程中，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。
然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

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

现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。

基础组件的自动化全局注册

详看这里：链接