注册了全局组件 那么在其他的业务组件中就不需要在引入和注册了,直接使用即可。
Vue.use() 实现原理
1.需要传入一个参数:对象 || 函数
2.如果插件使用的是对象 那必须提供install函数
3.如果插件使用的是函数 它会被作为install方法
install 方法调用时,会将Vue作为参数传入
1.在公共组件中 新建一个index.vue文件
对象形式
require.context(文件路径,是否深度查找[bool],匹配的文件后缀)==webpack提供
// 导入vue import Vue from 'vue
export default {
install(Vue) {
var requireComponent = require.context('./', true, /\.vue$/)
/*
requireComponent.keys() 循环注册组件
*/
requireComponent.keys().forEach(item => {
// 获取组件配置
// console.log(requireComponent(item), 6);
/* moduleDefault===相当于组件的路径
import PageTools from "@/components/PageTools"; */
var moduleDefault = requireComponent(item).default
// console.log(moduleDefault, 88)
// 全局注册组件
/*
每一个组件的名字都不一致 所以拿到注册的组件的名字( moduleDefault.name)
*/
Vue.component(moduleDefault.name, moduleDefault)
})
}
}
函数
// 导入vue import Vue from 'vue
export default function(Vue){
// 里面的function就相当于install方法,抛出一个install()方法
//require.context(文件路径,是否深度查找[bool],匹配的文件后缀)==webpack提供
var requireComponent = require.context('./', true, /\.vue$/)
/*
requireComponent.keys() 循环注册组件
*/
requireComponent.keys().forEach(item => {
// 获取组件配置
// console.log(requireComponent(item), 6);
/* moduleDefault===相当于组件的路径
import PageTools from "@/components/PageTools"; */
var moduleDefault = requireComponent(item).default
// console.log(moduleDefault, 88)
// 全局注册组件
/*
每一个组件的名字都不一致 所以拿到注册的组件的名字( moduleDefault.name)
*/
Vue.component(moduleDefault.name, moduleDefault)
})
}
2.在mian.js文件中 引入公共组件 并且使用Vue.use插件
!!!!该方法需要在调用new Vue()之前被调用
/* 默认导入 > 一个模块中只能用一次默认导出 */
import pluginCom from '@/components'
/*
将install(Vue){}这个对象 被 Vue.use()导入使用
install传入的Vue 就是 参数 ---- install是函数 Vue 是参数
*/
Vue.use(pluginCom)
!!!注意 全局注册组件 每个组件里面的name值 必须都要写 不然会报错