Vue全局注册业务组件

在开发的过程中，你是不是也有这样的烦恼，一些常用的通用组件，总是要在不同的文件中反复引用、注册，其实，只要几步就可以直接使用它们

---

• 新建业务组件入口文件index.js，注入循环执行Vue.component()，抛出全局注册函数：

// 在index.js中

import Component1 from './component1.vue'
import Component2 from './component2.vue'
import Component3 from './component3.vue';

const components = []
components.push(Component1)
components.push(Component2)
components.push(Component3)

function componentsInstall (Vue) {
  for (let component of components) {
    Vue.component(component.name, component)
  }
}
export { componentsInstall }

• 在main.js中，传递Vue实例，执行componentsInstall ()

//在main.js中,代入Vue实例执行
import Vue from 'vue'
componentsInstall(Vue)

• 在page.vue中可直接使用，不需要再次引入注册

<template>
	<Component1></Component1>
</template>

---