vue.component和vue.use,Vue.prototype.$xx的区别,用法

Vue.use()注册与Vue.component()注册区别就在于一个install方法。

Vue.component()：注册一个组件在全局使用；
Vue.use()： 可以一次性注册多个组件或添加全局方法或属性；

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')

用法

注册全局组件。
使用Vue.component()方法注册全局组件。
第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。
第二个参数是将要注册的Vue组件。

import Vue from 'vue';
// 引入loading组件 
import Loading from './loading.vue';
// 将loading注册为全局组件，在别的组件中通过<loading>标签使用Loading组件
Vue.component('loading', Loading);

使用Vue.use注册插件。
这个方法接收一个参数。这个参数必须具有install方法。Vue.use函数内部会调用参数的install方法。
如果插件没有被注册过，那么注册成功之后会给插件添加一个installed的属性值为true。Vue.use方法内部会检测插件的installed属性，从而避免重复注册插件。
插件的install方法将接收两个参数，第一个是参数是Vue，第二个参数是配置项options。
在install方法内部可以添加全局方法或者属性、全局指令、mixin混入、添加实例方法、使用Vue.component()注册组件等。

import Vue from 'vue';

// 这个插件必须具有install方法
const plugin = {
  install (Vue, options) {
    // 添加全局方法或者属性
    Vue.myGlobMethod = function () {};
    // 添加全局指令
    Vue.directive();
    // 添加混入
    Vue.mixin();
    // 添加实例方法
    Vue.prototype.$xxx = function () {};
    // 注册全局组件
    Vue.component()
  }
}

// Vue.use内部会调用plugin的install方法
Vue.use(plugin);

示例
下面看一下element-ui里面的实现。

在./src/index.js里面第144行定义了一个install方法，后面导出的对象里面就引用了这个方法。然后在我们的项目中引入element-ui，必须要使用Vue.use()注册之后，才能使用element-ui的组件。element-ui的按需引入组件功能也是类似的实现方式。

// src/index.js
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

module.exports = {
  version: '2.4.11',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination
  //...
}

使用Vue.prototype.$xx的情况

在做一个项目的时候，我会习惯性的将某些方法直接绑定到原型上面，然后直接通过this点出来就可以使用了，当然，这个是在多个页面都用到的时候我会选择这样做。
 在main.js文件中写入：

import { Toast } from 'mint-ui';
Vue.prototype.$toast = Toast;
		    
import Axios from 'axios';
Vue.prototype.$http = Axios;

用到的页面：

this.$toast("处理数据过程发生错误");
		
this.$http(url, [{
     headers: {
     	Authorization: "Bearer " + sAser.storage('token')
     },
     dataType: 'jsonp',
     crossDomain: true,
}]).then((res)=>{
     console.log(res)
}).catch((err)=>{
      console.log(err)
})

使用Vue.use()的情况
  当每个页面都需要使用到的插件、方法，直接使用vue.use()全局注入，这样我们就不需要在每个页面都单独引入了。

import Vue from 'vue';
import Router from 'vue-router';
import Vuex from 'vuex';
		    
Vue.use(Router);
Vue.use(Vuex);