目录
一、常用的局部引入
二、创建一个js 进行统一注册 然后在main.js引入统一管理的js文件实现全局注册
三、自动注册全局引入
一、常用的局部引入
<template> <div> <!--3.使用组件--> <Button></Button> </div></template><script> // 1. 引入组件import Button from '../view/button.vue'export default { // 2. 注册组件 components: { Button, }}</script>
总结: 在哪个页面需要就在那个页面引入、注册、使用
二、创建一个js 进行统一注册 然后在main.js引入统一管理的js文件实现全局注册
1、global.js统一注册管理:
// 1.引入vueimport Vue from 'vue'import Child1 from './child1'import Child2 from './child1'import Child3 from './child1'import Child4 from './child1'import Child5 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+$/)是去掉后面的.vue console.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) })
结构: