前言

一、为什么要封装全局组件？

项目中需要多次使用，进行一次封装，全局使用。迎合了es6的模块化开发思想。

二、如何封装全局组件

为了统一管理全局组件，建议将封装的全局组件都写在src根目录下一个专门的文件夹中，比如src/components。 注：示例中xxx、文件夹名和.vue结尾的文件的名字均可以可以自定义。

1.方法一

代码演示

代码如下（示例）： 在src/components文件夹下新建 xxx文件夹，xxx文件夹下新建index.vue

<template>
	<div>
		自定义的全局组件
    </div>
</template>

在main.js中引入，注册为全局组件。

// 省略其他
// 引入
import 组件名 from '@/components/xxx'
// 注册为全局组件
Vue.component('组件名',组件名)

2.方式二

思路

Vue官方提供的插件有 Vue Router、Vuex和Vue 服务端渲染三个
Vue.use可以接受一个对象，Vue.use(obj)
对象obj中需要一个 install 函数
在 Vue.use(obj)时，会自动调用该 install 函数，并传入到 Vue构造器

代码演示

代码如下（示例）： 在src/components文件夹下新建yyy文件夹，在yyy文件夹下新建index.vue文件

<template>
	<div>
		通过注册插件的方式，注册全局组件
	</div>
</template>

在src/components文件夹下新建index.js文件

// 引入写好的全局组件
import 组件名1 from './xxx'
import 组件名2 from './yyy'
// 默认导出插件
export default {
	install: function(Vue) {
		console.log('自定义的插件~')
		// 在自定义的插件中注册为全局组件
		Vue.component('组件名1',xxx)
		Vue.component('组件名2',yyy)
		// 也可以往Vue的原型对象上添加属性或者方法，名字可以自定义
		// 在其他.vue结尾的文件中，可以通过this，访问自己添加的属性和方法
		Vue.prototype.num = 10
		Vue.prototype.$sayHi = () => {
			alert('Hi~')
		}
	}
}

在main.js文件下，使用该插件。

import Vue from 'vue'
// 导入写好的自定义插件
import myCom from '@/components'
Vue.use(myCom)

优点

可以增强Vue的功能
通过注册插件的方式,进行统一注册全局组件

总结

今天就总结到这里，记得收藏哦~忘记怎么使用了就回来瞅瞅