批量注册组件

224 阅读1分钟

注册了全局组件 那么在其他的业务组件中就不需要在引入和注册了,直接使用即可。

Vue.use() 实现原理

1.需要传入一个参数:对象 || 函数

2.如果插件使用的是对象 那必须提供install函数

3.如果插件使用的是函数 它会被作为install方法

install 方法调用时,会将Vue作为参数传入

1.在公共组件中 新建一个index.vue文件

对象形式

require.context(文件路径,是否深度查找[bool],匹配的文件后缀)==webpack提供

// 导入vue import Vue from 'vue
export default {
  install(Vue) {
    var requireComponent = require.context('./', true, /\.vue$/)
    /*
    requireComponent.keys() 循环注册组件
    */
    requireComponent.keys().forEach(item => {
      // 获取组件配置
      // console.log(requireComponent(item), 6);
      /* moduleDefault===相当于组件的路径
     import PageTools from "@/components/PageTools"; */
      var moduleDefault = requireComponent(item).default
      // console.log(moduleDefault, 88)
      // 全局注册组件
      /*
      每一个组件的名字都不一致  所以拿到注册的组件的名字( moduleDefault.name)
      */
      Vue.component(moduleDefault.name, moduleDefault)
    })
  }
}

函数

// 导入vue import Vue from 'vue
export default function(Vue){
  // 里面的function就相当于install方法,抛出一个install()方法
    //require.context(文件路径,是否深度查找[bool],匹配的文件后缀)==webpack提供
    var requireComponent = require.context('./', true, /\.vue$/)
    /*
    requireComponent.keys() 循环注册组件
    */
    requireComponent.keys().forEach(item => {
      // 获取组件配置
      // console.log(requireComponent(item), 6);
      /* moduleDefault===相当于组件的路径
     import PageTools from "@/components/PageTools"; */
      var moduleDefault = requireComponent(item).default
      // console.log(moduleDefault, 88)
      // 全局注册组件
      /*
      每一个组件的名字都不一致  所以拿到注册的组件的名字( moduleDefault.name)
      */
      Vue.component(moduleDefault.name, moduleDefault)
    })
  }


2.在mian.js文件中 引入公共组件 并且使用Vue.use插件

!!!!该方法需要在调用new Vue()之前被调用

/* 默认导入 > 一个模块中只能用一次默认导出 */
import pluginCom from '@/components'
/*
 将install(Vue){}这个对象 被 Vue.use()导入使用 
 install传入的Vue 就是 参数 ---- install是函数 Vue 是参数
*/
Vue.use(pluginCom)

!!!注意 全局注册组件 每个组件里面的name值 必须都要写 不然会报错