vue引入组件的几种方法

目录

一、常用的局部引入

二、创建一个js 进行统一注册 然后在main.js引入统一管理的js文件实现全局注册

三、自动注册全局引入

一、常用的局部引入

 // 1. 引入组件import Button from '../view/button.vue'export default {// 2. 注册组件components: {Button,}}

总结： 在哪个页面需要就在那个页面引入、注册、使用

二、创建一个js 进行统一注册 然后在main.js引入统一管理的js文件实现全局注册

1、global.js统一注册管理：

// 1.引入vueimport Vue from 'vue'importChild1 from './child1'importChild2 from './child1'importChild3 from './child1'importChild4 from './child1'importChild5 from './child1'Vue.component(Child1)Vue.component(Child2)Vue.component(Child3)Vue.component(Child4)Vue.component(Child5)

2、在main.js中引入global.js实现全局注册

优点： 减少每个页面引入的繁琐步骤 、减少了每一页面重复引入的代码，

缺点： 有90%的代码都是重复的

三、自动注册全局引入

注释版：

// 引入vueimport Vue from 'vue'// 将字符串首字母大写返回当前字符串function changeStr(str) {return str.charAt(0).toUpperCase() + str.slice(1)}// require.context: 是动态引入文件// 参数一: 当前路径（引入.vue文件的当前路径）// 参数二：是否匹配当前文件下的子文件// 参数三：查找文件格式以.vue结尾的文件const requireComponent = require.context('./', false, /\.vue$/)console.log("批量注册组件", requireComponent.keys())// ['./head-l.vue', './head-r.vue', './head.vue']requireComponent.keys().forEach(fileName => {// 当前组件const config = requireComponent(fileName)console.log("组件的信息config", config)//获取组件名const componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/))// 第一个replace(/^\.\//, '')去掉前面的./ 第二个replace(/\.W+$/)是去掉后面的.vueconsole.log("组件名", componentName)// 例如：Head-rundefined// 参数一： 组件名// 参数二： config：是一整个组件的内容；config.default：是组件中export.default里面的内容Vue.component(componentName, config.default || config)})

纯净版：

import Vue from 'vue'function changeStr(str) {return str.charAt(0).toUpperCase() + str.slice(1)}const requireComponent = require.context('./', false, /\.vue$/)requireComponent.keys().forEach(fileName => {const config = requireComponent(fileName)const componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/))Vue.component(componentName, config.default || config)})

结构：