自定义vue组件，一般是局部引用的方式载入，使用的时候，在应用的组件中使用 import moduleName from ‘module' 导入，在components中注册

import comment from "../sub/comment.vue";

export default {

data() {

return {

info: {},

id: this.$route.query.id

};

},

methods: {},

components: {

comment

},

那么如果某个组件经常复用，岂不是每次在新组建中引用都要导入一次吗？是的 。这种情况下可以将组件封装成全局组件，一次导入之后，全局都可以使用。 虽然这种做法不太常见，但是这里还是将其整理出来。

1.首先创建一个文件夹loading

用来保存需要全局引用的组件，并且存放一些配置文件。

2.创建一个loading.vue的组件。

该组件中除了组件的基础结构，并无其他内容。它的作用是用来加载准备自定义的组件，最后将loading组件加载到全局的Vue中，这样就一次性完成了所有自定义组件的加载，非常方便。

export default {

data() {

return {};

},

methods: {}

};

3.创建自定义组件

这里以一个简单封装的mint-ui轮播图为例。

export default {

name: "navbar",

props: ["list"], //接收父组件数据

data() {

return {

};

},

methods: {

detail(e) {

var id = e.target.dataset.id;

var url = `/GoodsInfo/${id}`;

this.$router.push(url);

}

},

created() {}

};

.mint-swipe {

height: 150px;

}

.mint-swipe img {

width: 100%;

}

4.创建index.js，用来导出所有自定义组件。

import turns from './turns.vue'

const loading = {

install: function (Vue) {

Vue.component('turns', turns)

}

}

export default loading;

其实到这里组件封装就结束了，下面再演示下如何使用。

5.在main.js中，导入并使用loading组件。

import loading from './lib/loading';

Vue.use(loading);

这样就将组件全局引用成功了！

6.在需要使用的地方，直接使用组件名即可。

通过这种方式，就能实现组件的全局引用。

这种做的好处是对于复用性非常高的组件，省去了每次导入的麻烦；

缺点是无法直观的看到组件引入和注册，对于不清楚的人来说看不懂组件名的意义。

其实官方文档中已经提到了一种解决方案：

基础组件的自动化全局注册

可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。

所以会导致很多组件里都会有一个包含基础组件的长列表：

import BaseButton from ‘./BaseButton.vue' import BaseIcon from

‘./BaseIcon.vue' import BaseInput from ‘./BaseInput.vue'

export default { components: {

BaseButton,

BaseIcon,

BaseInput } }

而只是用于模板中的一小部分：

幸好如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码：

import Vue from ‘vue' import upperFirst from ‘lodash/upperFirst'

import camelCase from ‘lodash/camelCase'

const requireComponent = require.context( // 其组件目录的相对路径

‘./components', // 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式

/Base[A-Z]\w+.(vue|js)$/ )

requireComponent.keys().forEach(fileName => { // 获取组件配置 const

componentConfig = requireComponent(fileName)

// 获取组件的 PascalCase 命名 const componentName = upperFirst(

camelCase(

// 剥去文件名开头的 ./ 和结尾的扩展名

fileName.replace(/^./(.*).\w+$/, ‘$1')

) )

// 全局注册组件 Vue.component(

componentName,

// 如果这个组件选项是通过 export default 导出的，

// 那么就会优先使用 .default，

// 否则回退到使用模块的根。

componentConfig.default || componentConfig ) })

补充知识：vue组件注册 Vue.extend Vue.component Vue.use的使用 以及组件嵌套

我就废话不多说了，大家还是直接看代码吧~

/**

* vue.extend用法

* 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

* 注意：此实例可以挂载到根实例之外

*/

const Profile = Vue.extend({

template: '

{{firstName}} {{lastName}} aka {{alias}}

',

data: function () {

return {

firstName: 'Walter',

lastName: 'White',

alias: 'Heisenberg'

}

}

})

// 创建 Profile 实例，并挂载到一个元素上。

new Profile().$mount('#opp')

let navbar = {

template: `

data:()=>{

return {

}

},

mounted() {

console.log(this.$parent)

}

};

const MyPlugin = {

install:(vue, arguments)=>{

console.log(arguments);

vue.component('navbar', navbar);

}

}

Vue.use(MyPlugin, {a:1, b:2}); // 组件注册成功

// logo组件

Vue.component("logo", {

template: `

`,

inject: ['logoSrc'],

data:()=>{

return {

}

},

mounted() {

console.log(this.$parent)

}

})

// header组件 组件调用 provie inject传值

Vue.component("buttoncounter", {

template: `

`,

provide:{

logoSrc:'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根实例

let vm = new Vue({

el:"#app",

data:{

name: 'Marry'

},

mounted(){

console.log('vue根实例初始化完毕')

}

})

console.log(vm);

以上这篇Vue 实现创建全局组件,并且使用Vue.use() 载入方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。