vue进阶：使用插件实现弹窗类组件

在之前的文章里，已经分析了怎么实现弹窗类组件，并且介绍了两种实现弹窗类组件的方式，分别是借助Vue构造函数和Vue的extend函数。想了解的可以先看我之前的文章：vue进阶：弹窗类组件实现方式

插件

插件是嘛?

插件通常用来为 Vue 添加全局功能。我们vue项目中最常用的插件就是vue-router。
vue插件和组件的诞生都是为了实现逻辑的复用，他们的本质都是对代码逻辑的封装，所以在一定程度上，组件可以封装成插件，插件也可以改写成组件。具体使用插件还是组件就要看项目中的实际使用场景了。Vue 插件和Vue组件只是在 Vue.js 中包装的两个概念。

除此之外，插件与组件的不同之处在于：插件是全局的，组件可以全局注册也可以局部注册。

插件的使用方式？

回顾下vue-router的使用方法：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
   
  routes: [
    {
   
      path: '/',
      name: '',
      component: ***
    }
  ]
})

通过全局方法 Vue.use() 使用插件。注意：它需要在你调用 new Vue() 启动应用之前完成。之后在其他 Vue 实例里面就可以通过 this.$xxx 来调用插件中提供的 API 了。

如果有需要传入一些参数：

Vue.use(MyPlugin, {
    someOption: true })

如何开发一个插件？

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

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

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

  // 3. 注入组件选项
  Vue