vue 插件开发之vue.use()

vue中一个组件是一个.vue文件，里面包含了一些列的相关逻辑。

那么一个插件是什么呢？

插件通常用来为vue 添加全局功能。， 插件的功能范围没有严格的限制，通常有以下几种：

1. 添加全局的方法或属性：如Vue.myGlobalMethod=function(){...}
2. 添加全局资源：如Vue.directive('focus',{...})
3. 通过全局混入mixin来添加一些组件选项: 如 Vue.mixin({})
4. 添加Vue实例方法，通过把它们添加到原型上实现：如 Vue.prototype.$xxx=... 

插件 (Plugin) 是用来增强你的技术栈的功能模块

编写插件：

vue的插件实现原理：

1. 暴露一个install方法（vue构造器，可选的选项对象）

updateDialogPlugin.install = (Vue) =>{
 // Vue.component注册一个组件，全局注册
  Vue.component('update-dialog', Vue.extend(updateDialog));
  Vue.component('updateDialog', Vue.extend(updateDialog));
 //添加vue实例方法
  Vue.prototype.$updateDialog = updateDialogPlugin;
}

2.插件注册：

• 要在new vue前调用
• 自动阻止多次注册

vue.use() 方法接收一个【插件对象 || 一个包含 install方法的对象】作为参数。

Vue.js 会调用这个插件的 install 方法（如果插件对象有的话），

并将 Vue 作为参数 传递给这个方法。

此外，vue.use()还可以接收额外的可选参数，这些参数会被传递给 install 方法。

import updateDialogPlugin from './plugin/dialog';
Vue.use(updateDialogPlugin);

3.插件使用：

this.$updateDialog(...)

注册组件：

• 全局注册:Vue.component()
• 局部注册

编写插件的几种方式：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

总结：

组件和插件是不同的，在编写方式，使用场景和注册形式上都不同 。 插件主要是一个功能模块， 为了扩展功能的。 之前提到的mixin混入，和自定义指令等都是为了扩展功能，提高复用性的。 实际业务中，公共弹窗就可以开发成一个插件。