来试一试 Vue.use 注册全局组件

前言

我们的业务组件一般都定义成了局部组件，使用的时候需要在components中注册，而我们全局通用组件一般是需要定义为全局组件的，不需要局部注册

注册格式

//  定义全局组件的格式
import 组件对象 from 'xxxxx.vue'
Vue.component('组件名', 组件对象)

//  定义局部组件的格式
import xxxx from 'xxxxx.vue'
export default {
	components: {
	   xxxx
	}
}

1.全局注册

main.js中直接注册全局

import PageTools from '@/components/PageTools'
Vue.component(PageTools.name, PageTools)

以上我们通过Vue.component全局api实现了全局注册，在业务组件中就不需要再引入和注册了，直接使用即可。

这种方式虽然可以非常方便的完成注册，但是大家想象一个场景：如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护，为了解决这个问题，可以了解一下插件的形式。

2.Vue.use使用介绍

作用

它是Vue提供一个静态方法，用来向Vue注册插件(增强vue的功能)。文档: cn.vuejs.org/v2/api/#Vue…

格式

Vue.use(obj)

说明:

1. Vue.use 可以接收一个对象，Vue.use(obj)
2. 对象obj中需要提供一个 install 函数
3. 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器

基本示例-install的参数及执行

在main.js中

const MyPlugin = {
	install(obj) {
    console.log('install.....', obj)
  }
}
Vue.use(MyPlugin)

定义全局组件

定义全局组件的格式

Vue.component('组件名'， 组件对象)

在main.js中

import PageTools from './components/PageTools'
const MyPlugin = {
	install(Vue) {
    console.log('install.....', obj)
    Vue.component('PageTools', PageTools)
  }
}
Vue.use(MyPlugin)

在其他页面中，均可以直接使用page-tools

小结

Vue.use()官方提供的用来拓展Vue功能的入口。

格式：定义格式；使用格式

ps:

如果内容有错误的地方欢迎指出（觉得看着不理解不舒服想吐槽也完全没问题）；如果有帮助，欢迎点赞和收藏，转载请著明出处，如果有问题也欢迎私信交流