组件封装 -- Vue.use 优化全局组件注册

Vue.use() :

• 注册、挂载插件、组件

• 它是 Vue 提供一个静态方法，用来向 Vue 注册插件

• Vue.use 可以接收一个对象，Vue.use(obj)

• 对象 obj 中需要提供一个 install 函数

• 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue 构造器

• Vue.use 文档

使用步骤:

1. 创建 js 文件模块，在模块中使用 Vue.use 统一挂载对应的方法，然后将模块在 main.js 文件导入

   • 说白了，我们需要创建一个模块，将所有需要公共注册在组件在这个模块中进行统一注册

// 引入子组件,子组件要有name属性
import PageTools from './PageTools'

// 创建数组,数组中是导入的组件模块
const components = [PageTools]
export default {
  // 当我们在Vue.use方法中创建了一个 install方法
  // 方法会被自动调用，在调用的过程中，会将Vue作为参数(形参)传递给install方法
  install(Vue) {
    // Vue.component('PageTools', PageTools)
    // 对组件模块数组进行遍历
    // 回调函数形参，就是每一个组件
    components.forEach(component => {
      // 第一个参数:component. name声明的组件的 name属性、也就是别名
      // 第二个参数:组件具体的逻辑
      Vue.component(component.name, component)
    })
  }
}

         2.在main.js中注册插件

// 导入全局挂载的组件
import component from './components'
Vue.use(component)