VUE2.X全局组件及动态引入组件

效果图：

问题描述：

当一个小item在项目中重复使用，或类似样式重复多次。

• 左侧树结构在多个页面重复调用
• 右侧四个小item外框相似，只有内容不同

组件注册及批量注册： 

项目中需要多次使用，把它封装成公共组件，注册在全局进行多次复用。

 单独组件全局注册：

• 在 src/components 文件下创建需要注册得组件文件，如：public-item/index.vue

 一定要写name

• 在 src/components 文件下的index.js中引用封装好的组件

// vue2.0
// import 组件对象 from './文件夹名（xxx）'
import Public from './public-item/index.vue'
export default {
  install(Vue) {
    // Vue.component('组件对象', 组件对象)
    Vue.component(Public.name, Public)
  }
}

• 在 main.js 中

// Components 为上面在 index.js 文件中默认导出的对象
import Components from './components/index.js'
Vue.use(Components) // 全局注册使用

批量注册全局组件：

与单独注册组件相似，只是在 需要注册得组件文件中，创建不同的.vue文件，如：public-item/组件名.vue。在 main.js 中的写法一样，只是在 src/components 有所不同。

// require.context参数：1. 文件夹所在位置  2. 是否加载子目录true/false  3. 加载的正则匹配(以.vue为结尾的文件)
const referComponent = require.context('./public-item', false, /\.vue$/)
export default {
  install(app) {
    // 批量注册全局组件
    referComponent.keys().forEach(key => {
      // 导入组件
      const component = referComponent(key).default
      // 注册组件
      app.component(component.name, component)
    })
  }
}

组件使用：

动态引入：

• 效果图右侧的四个小item外框相似，只有内容不同的情况下，先注册一个外框的组件

• 再把内部不同的数据写为不同的组件，动态引入到外框组件中

组件使用：

总结：

在vue.js文档中有很多基础用法，超级香！！

如果有不对的地方希望能够提出来，谢谢大家啦~