vue全局组件和局部组件的写法

全局组件

通过 Vue.component 注册的组件为全局组件。如：

  import MyComponentName from './components/MyComponentName'

  Vue.component('my-component-name', MyComponentName)

全局组件可以用在 任何新创建 的 Vue根实例 的模板中

注意： 全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

局部组件

引用官网：

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

在需要使用的Vue实例中，通过这种方式使用局部组件

  <component-a></component-a>

  import ComponentA from './ComponentA.vue'

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

自动化全局注册

在有很多全局组件需要注册时，在main.js中就会有很长的注册列表，我们可以通过官网提供的方法进行优化

全局组件注册封装

通过 自定义插件 的方式，把这些全局注册包装到一个js文件中，再通过Vue.use导入安装到main.js文件中

Vue自定义插件具体步骤和使用可查看这篇问题

具体步骤：

1. 创建一个 components 目录，并将每个组件放置在其各自的文件中
2. 在 components 根目录下新建index.js文件，在内部方法中引入、注册组件并导出
3. 在 main.js 中引入 index.js，并通过Vue.use 注册全局组件

注意：Vue.use方法需要在调用 new Vue() 之前被调用

部分代码

1：components 根目录下index.js文件

  import GlobalDialog from './globalDialog/dialog.vue'; //后缀可省略
  import GlobalLoading from './globalLoading/loading.vue'; //后缀可省略

  const install = Vue => {
      Vue.component(GlobalDialog.name,GlobalDialog);
      Vue.component(GlobalLoading.name,GlobalLoading);
  };

  export default install;

main.js文件

  import GlobalComponent from './components/index'

  Vue.use(GlobalComponent);