[JavaScript知识库]公共组件-Vue.use使用介绍

目标

掌握Vue.use()的用法，能用它来注册全局组件；

作用

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

插件: 智能设备

组件：iphone手机

有几个官方的：

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(vant)

格式

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功能的入口。

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

公共组件-Vue.use优化全局组件注册

提供统一注册的入口文件

src/componets/index.js

import 组件1 from './xxxx'
import 组件2 from './xxxx'
export default {
  install(Vue) {
     Vue.component('组件名', 组件2)
    Vue.component('组件名', 组件1)
  }
}

在main.js中注册插件

import Components from './components'
Vue.use(Components)

注：其实elementUI的全局引入方法就是相同的逻辑
接下来就可以在全局直接使用该组件了