在前端开发中,经常需要将业务进行组件化,我们就需要去注册组件
1.vue如何实现整体注册组件 (快速导入)
**搭配webpack来批量注册组件 **
+ require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API
参数1:加载的文件目录
参数2:是否加载子目录
参数3::正则,匹配文件
requireComponent:返回值:导入函数 fn
keys() 获取读取到的所有文件列表
新建src/components/index.js
import Vue from "vue";
// 使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 需要注意的是每一个组件的name都必须有 否则就会出现组件注册不了的情况 )
const requireComponent = require.context("./", true, /\.vue$/);
console.log(requireComponent.keys(), 3344222);
requireComponent.keys().forEach((item) => {
// console.log(requireComponent(item), 77) // ['./bread.vue', './pubArt.vue', './qq/q.vue']
/* 获取的是 每一个组件暴露出来的对象 */
const defaultObj = requireComponent(item).default;
Vue.component(defaultObj.name, defaultObj);
});
引入main.js
1.import "./components/index.js";
或者2.import pluginComponent from '@/components/index.js'
Vue.use(pluginComponent)
2.vue如何实现整体注册组件(快速导入加手动)
1. 其中components也封装了公共其他组件引入 src/components/index.js 中
使用Vue.use()来注册组件 实现的原理: 1-需要传入一个参数:对象||函数 2-对象中提供了一个install函数 3-install函数有一个参数接受的是Vue
// 组件复用
// 该文件负责所有的公共组件的全局注册
import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
import ImagUpload from './ImageUpload'
// 导出
export default {
install(Vue) {
Vue.component('PageTools', PageTools)
Vue.component('UploadExcel', UploadExcel)
Vue.component('ImagUpload', ImagUpload)// 图片组件
}
}
2.全局入口在main.js, 在new Vue之上注册引入,将要注册的组件进行引入
import Vue from 'vue'
import UploadExcel from '@/components/index.js'
const app = Vue(App)
app.use(UploadExcel).use(store).use(router).mount('#app')
// 注册全局组件
import component from '@/components'
Vue.use(component)
3.直接用
<UploadExcel>内容</UploadExcel> 或者 <upload-excel> 内容 </upload-excel>**
2.局部注册组价 src//components/index.js(一般)
在components写导入到需要的文件里面
.在script标签中进行注册,注意:组件注册的名字和引入的名字需要保持一致即可进行简写.在template标签中以html的标签格式进行使用
**import UploadExcel from 'vue'
import UploadExcelfrom '@/components/index.js'
<UploadExcel>内容</UploadExcel> 或者 <upload-excel> 内容 </upload-excel>**
附录参考(弱水三千只取一瓢饮)
手动注册组件
src/components/index.js
import Skeleton from './Skeleton'
import XtxCarousel from './library/xtx-carousel.vue'
export default {
install (Vue) {
Vue.component(Skeleton.name, Skeleton)
Vue.component(XtxCarousel.name, XtxCarousel)
}
}
main.js
import {
createApp } from 'vue'
import componentPlugin from '@/components/index.js'
const app = createApp(App)
app.use(componentPlugin).use(store).use(router).mount('#app')
批量注册组件
src/components/index.js
const requireComponent = require.context('./', true, /\.vue$/)
console.log(requireComponent.keys(), 3344222)
export default {
install (Vue) {
requireComponent.keys().forEach((item) => {
// console.log(requireComponent[item], 77) // ['./bread.vue', './pubArt.vue', './qq/q.vue']
/* 获取的是 每一个组件暴露出来的对象 */
const defaultObj = requireComponent(item).default
Vue.component(defaultObj.name, defaultObj)
})
}
}
+ require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API
参数1:加载的文件目录
参数2:是否加载子目录
参数3::正则,匹配文件
requireComponent:返回值:导入函数 fn
keys() 获取读取到的所有文件列表
main.js
import {
createApp } from 'vue'
import componentPlugin from '@/components/index.js'
const app = createApp(App)
app.use(componentPlugin).use(store).use(router).mount('#app')