vue组件的挂载分为局部和全局
局部挂载组件就是在每一个需要引入的页面,去引入你需要的组件:
import ... from '../..'
并且需要声明:
components: {
...//引入的组件名
}
我们可以发现每次使用都需要引入和声明,这样会大大影响效率。
全局挂载组件就不需要每次引用每次都挂载,只需要全局挂载一次
我们在components文件夹下的index.js中做一些全局挂载逻辑
代码如下:
import Vue from 'vue'
//封装获取组件name的方法
const resolveComponentName = (component, componentFile = '') => {
//获取到组件的name名称
let componentName = (component.default || component).name
if (!componentName && componentFile) {
const fileName = componentFile.replace(/^.*\/([^/]+)\.js/, '$1')
if (fileName !== 'index') {
// 非 index.js 直接将文件名作为组件名
componentName = fileName
} else {
// 文件名是index.js
// 将该文件的最后一层的目录名作为组件名
componentName = componentFile.replace(/^(.*\/)?([^/]+)\/index\.js$/, '$2')
}
}
return componentName || ''
}
const context = require.context('./', true, /^(?!\.?\/?index\.js$).*\.(js|vue)$/)
//遍历组件
context.keys().forEach(componentFilePath => {
const component = context(componentFilePath)
if (component.__ignore) {
// true 表示该组件不会注册到vue组件中,但依然会被加载
return
}
//获取组件中的name
let componentName = resolveComponentName(component, componentFilePath)
//组件名不存在打印错误
if (!componentName) {
console.error(`Component ${componentFilePath} register faild, the component name is undefined`)
return
}
// console.log(componentFilePath)
//挂载vue上,全局使用
Vue.component(componentName, component.default || component)
})
最终我们只需要在main.js中去引入这个文件即可
直接使用封装好的组件:
需要注意的是我们所用的组件名字必须要和我们封装组件的name一致:
最终展示效果: