目标
掌握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)
说明:
- Vue.use 可以接收一个对象,Vue.use(obj)
- 对象obj中需要提供一个 install 函数
- 在 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的全局引入方法就是相同的逻辑
接下来就可以在全局直接使用该组件了