{{info.title}}
那么如果某个组件经常复用，岂不是每次在新组建中引用都要导入一次吗？是的。这种情况下可以将组件封装成全局组件，一次导入之后，全局都可以使用。虽然这种做法不太常见，但是这里还是将其整理出来。
1.首先创建一个文件夹loading
用来保存需要全局引用的组件，并且存放一些配置文件。
2.创建一个loading.vue的组件。
该组件中除了组件的基础结构，并无其他内容。它的作用是用来加载准备自定义的组件，最后将loading组件加载到全局的Vue中，这样就一次性完成了所有自定义组件的加载，非常方便。
3.创建自定义组件
这里以一个简单封装的mint-ui轮播图为例。
.mint-swipe{
height:150px;
}
.mint-swipeimg{
width:100%;
}
4.创建index.js，用来导出所有自定义组件。
importturnsfrom'./turns.vue'
constloading={
install:function(Vue){
Vue.component('turns',turns)
}
}
exportdefaultloading;
其实到这里组件封装就结束了，下面再演示下如何使用。
5.在main.js中，导入并使用loading组件。
importloadingfrom'./lib/loading';
Vue.use(loading);
这样就将组件全局引用成功了！
6.在需要使用的地方，直接使用组件名即可。
通过这种方式，就能实现组件的全局引用。
这种做的好处是对于复用性非常高的组件，省去了每次导入的麻烦；
缺点是无法直观的看到组件引入和注册，对于不清楚的人来说看不懂组件名的意义。
其实官方文档中已经提到了一种解决方案：
https://cn.vuejs.org/v2/guide/components-registration.html#基础组件的自动化全局注册
基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。
所以会导致很多组件里都会有一个包含基础组件的长列表：
importBaseButtonfrom‘./BaseButton.vue'importBaseIconfrom
‘./BaseIcon.vue'importBaseInputfrom‘./BaseInput.vue'
exportdefault{components:{
BaseButton,
BaseIcon,
BaseInput}}
而只是用于模板中的一小部分：
幸好如果你使用了webpack(或在内部使用了webpack的VueCLI3+)，那么就可以使用require.context只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件(比如src/main.js)中全局导入基础组件的示例代码：
importVuefrom‘vue'importupperFirstfrom‘lodash/upperFirst'
importcamelCasefrom‘lodash/camelCase'
constrequireComponent=require.context(//其组件目录的相对路径
‘./components',//是否查询其子目录false,//匹配基础组件文件名的正则表达式
/Base[A-Z]\w+.(vue|js)$/)
requireComponent.keys().forEach(fileName=>{//获取组件配置const
componentConfig=requireComponent(fileName)
//获取组件的PascalCase命名constcomponentName=upperFirst(
camelCase(
//剥去文件名开头的./和结尾的扩展名
fileName.replace(/^./(.*).\w+$/,‘$1')
))
//全局注册组件Vue.component(
componentName,
//如果这个组件选项是通过exportdefault导出的，
//那么就会优先使用.default，
//否则回退到使用模块的根。
componentConfig.default||componentConfig)})
补充知识：vue组件注册Vue.extendVue.componentVue.use的使用以及组件嵌套
我就废话不多说了，大家还是直接看代码吧~
/**
*vue.extend用法
*使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象。
*注意：此实例可以挂载到根实例之外
*/
constProfile=Vue.extend({
template:'{{firstName}}{{lastName}}aka{{alias}}
',
data:function(){
return{
firstName:'Walter',
lastName:'White',
alias:'Heisenberg'
}
}
})
//创建Profile实例，并挂载到一个元素上。
newProfile().$mount('#opp')
letnavbar={
template:`
`,
data:()=>{
return{
}
},
mounted(){
console.log(this.$parent)
}
};
constMyPlugin={
install:(vue,arguments)=>{
console.log(arguments);
vue.component('navbar',navbar);
}
}
Vue.use(MyPlugin,{a:1,b:2});//组件注册成功
//logo组件
Vue.component("logo",{
template:`
`,
inject:['http://www.haoziyuan.cclogoSrc'],
data:()=>{
return{
}
},
mounted(){
console.log(this.$parent)
}
})
//header组件组件调用provieinject传值
Vue.component("buttoncounter",{
template:`
{{header}}
`,
provide:{
http://www.haoziyuan.cclogoSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582433251882&di=de459decf2e157552b97a4879ae4135d&imgtype=0&src=http%3A%2F%2Fwww.suntop168.com%2Fblog%2Fzb_users%2Fupload%2F2014%2F2%2Fadf89182.jpg'
},
data:()=>{
return{
header:'我是头部导航栏'
}
},
mounted(){
console.log(this.$parent)
}
});
//vue根实例
letvm=newVue({
el:"#app",
data:{
name:'Marry'
},
mounted(){
console.log('vue根实例初始化完毕')
}
})
console.log(vm);
以上这篇Vue实现创建全局组件,并且使用Vue.use()载入方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。