Vue.use() 和 Vue.component() 的区别
官方定义:
Vue.use( plugin )
-
参数:
{Object | Function} plugin
-
用法:
安装 Vue.js 插件。如果插件是一个对象,必须提供
install
方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。该方法需要在调用
new Vue()
之前被调用。当 install 方法被同一个插件多次调用,插件将只会被安装一次。
-
参考:插件
Vue.component( id, [definition] )
-
参数:
{string} id
{Function | Object} [definition]
-
用法:
注册或获取全局组件。注册还会自动使用给定的
id
设置组件的名称// 注册组件,传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({ /* ... */ })) // 注册组件,传入一个选项对象 (自动调用 Vue.extend) Vue.component('my-component', { /* ... */ }) // 获取注册的组件 (始终返回构造器) var MyComponent = Vue.component('my-component')
-
参考:组件
2、当我们想好多地方要是用到同一个组件,又不想每次都在局部注册时,可以在main.js 中全局注册
main.js
import common from '@/components/common.vue'
Vue.component(common);
3、Vue.use() 可以一次性注册多个组件或添加全局方法或属性
Vue.use(plugin)的初始化方法{install:function(){}}里面可以一次性注册多个组件。
Vue.component只能一个一个注册。
install可以做更多的事情
MyPlugin.install=function(Vue,options){
//1.添加全局方法或属性
Vue.myGlobalMethod=function(){
//逻辑...
}
//2.添加全局资源
Vue.directive('my-directive',{
bind(el,binding,vnode,oldVnode){
//逻辑...
}
...
})
//3.注入组件选项
Vue.mixin({
created:function(){
//逻辑...
}
...
})
//4.添加实例方法
Vue.prototype.$myMethod=function(methodOptions){
//逻辑...
}
}