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){
//逻辑...
}
}
原文地址:https://www.cnblogs.com/liangziaha/p/15354054.html