目录
一、常用的局部引入
三、自动注册全局引入
一、常用的局部引入
<template>
<div>
<!--3.使用组件-->
<Button></Button>
</div>
</template>
<script>
// 1. 引入组件
import Button from '../view/button.vue'
export default {
// 2. 注册组件
***ponents: {
Button,
}
}
</script>总结： 在哪个页面需要就在那个页面引入、注册、使用
二、创建一个js 进行统一注册 然后在main.js引入统一管理的js文件实现全局注册
1、global.js统一注册管理：
javascript">// 1.引入vue
import Vue from 'vue'
import Child1 from './child1'
import Child2 from './child1'
import Child3 from './child1'
import Child4 from './child1'
import Child5 from './child1'
Vue.***ponent(Child1)
Vue.***ponent(Child2)
Vue.***ponent(Child3)
Vue.***ponent(Child4)
Vue.***ponent(Child5)2、在main.js中引入 global.js实现全局注册
优点： 减少每个页面引入的繁琐步骤 、减少了每一页面重复引入的代码，
缺点： 有90%的代码都是重复的
三、自动注册全局引入
注释版：
// 引入vue
import Vue from 'vue'
// 将字符串首字母大写 返回当前字符串
function changeStr(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
// require.context: 是动态引入文件
// 参数一: 当前路径（引入.vue文件的当前路径）
// 参数二：是否匹配当前文件下的子文件
// 参数三：查找文件格式以.vue结尾的文件
const require***ponent = require.context('./', false, /\.vue$/)
console.log("批量注册组件", require***ponent.keys()) // ['./head-l.vue', './head-r.vue', './head.vue']
require***ponent.keys().forEach(fileName => {
// 当前组件
const config = require***ponent(fileName)
console.log("组件的信息config", config)
//获取组件名
const ***ponentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/)) // 第一个replace(/^\.\//, '')去掉前面的./ 第二个replace(/\.W+$/)是去掉后面的.vue
console.log("组件名", ***ponentName) // 例如：Head-rundefined
// 参数一： 组件名
// 参数二： config：是一整个组件的内容； config.default：是组件中export.default里面的内容
Vue.***ponent(***ponentName, config.default || config)
})纯净版：
import Vue from 'vue'
function changeStr(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
const require***ponent = require.context('./', false, /\.vue$/)
require***ponent.keys().forEach(fileName => {
const config = require***ponent(fileName)
const ***ponentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/))
Vue.***ponent(***ponentName, config.default || config)
})结构：
