drop-down-load v1.0.1

Vue - 插件

一、定义

通常用来为Vue添加全局功能。功能范围一般有：

1、添加全局方法或者property。
2、添加全局资源：指令/过滤器/过渡 等。
3、通过全局混入来添加一些组件选项。
4、添加Vue实例方法，通过吧他们添加到 Vue.property 上实现。
5、一个库，提供自己的api，同时提供上面提到的一个活多个功能。

二、插件与组件的区别

组件是什么？

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发模式，在Vue中每个以.vue结尾的文件都可视为一个组件。

组件优势：

1、降低整个系统的耦合度，在接口不变的情况下，我们可以替换不同的组件，快速完成需求
2、调试方便，由于整个系统是通过组件组合起来的，出现问题时，可以用排除法直接摘除组件，或根据报错组件快速定位（因为每个组件间耦合度低，职责单一）
3、提高可维护性（因为每个组件职责单一，并且组件在系统中可复用）

区别：

1、编写形式
   组件最常见的形式就是Vue单文件的格式
   插件则是暴露一个install方法。该方法第一个参数是Vue构造器，第二个参数是一个可选的选项对象
2、注册形式
   组件：全局和局部两种
        全局注册：Vue.component('组件名称', {配置项})
        局部注册：用到的文件里通过components属性注册
   插件：通过Vue.use()方式安装
        Vue.use(插件名字, {配置项})
        注册插件的时候，需要在调用new Vue()启动前完成
        Vue.use会自动阻止多次注册相同插件，只会注册一次
        
        使用场景：
          组件：用来构成你的APP的业务模块，目标是App.vue
          插件：用来增强你的技术伐的功能模块，目标是Vue本身
          即插件是对Vue的功能的增强或补充
         

三、代码

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) {
    // 逻辑...
  }
}

在入口文件中，暴露一个扩展方法，在 install 方法里添加插件内容
Vue.prototype.   ---  注册全局属性
Vue.prototype.$xxx = function () {} --- 注册全局方法