19-Vue-Plugin

image

前言

随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的 loding 插件，来了解掌握插件的开发和使用。

什么是Vue.use(plugin)

Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用

用法：
Vue.use(plugin)

如果插件是一个对象，必须提供 install 方法。
如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
Vue.use(plugin)调用之后，插件的install方法就会默认接受到一个参数，这个参数就是Vue

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

总结：Vue.use是官方提供给开发者的一个api，用来注册、安装Vuex、vue-router、ElementUI之类的插件的。

什么时候需要定义插件

当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件
例如: 网络加载指示器

开发Loding插件

1. 在src目录下新建一个plugin文件夹，在这个目录进行封装

2. 在plugin目录下新建一个loding文件夹，并将封装好的组件放到这个文件夹，在这个文件夹下还需要一个index.js文件

Loding.vue

3. 在index.js文件中编写业务逻辑代码

如果要将一个组件封装成一个插件, 那么必须提供一个install方法，必须在install方法中注册当前的这个组件
这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象

export default {
  install: function (Vue, Options) {
  }
}

将组件添加到界面上

import Loading from './Loading'

export default {
  install: function (Vue, Options) {
    // 1.根据我们的组件生成一个构造函数
    const LoadingContructor = Vue.extend(Loading)
    // 2.根据构造函数创建实例对象
    const LoadingInstance = new LoadingContructor()
    // 3.随便创建一个标签(元素)
    const oDiv = document.createElement('div')
    // 4.将创建好的标签添加到界面上
    document.body.appendChild(oDiv)
    // 5.将创建好的实例对象挂载到创建好的元素上
    LoadingInstance.$mount(oDiv)
  }
}

添加初始化值

export default {
  install: function (Vue, Options) {
    ...
    if (Options && Options.title !== null && Options.title !== undefined) {
      LoadingInstance.title = Options.title
    }
  }
}

添加全局方法

export default {
  install: function (Vue, Options) {
    ...
    Vue.showLoading = function () {
      LoadingInstance.isShow = true
    }
    Vue.hiddenLoading = function () {
      LoadingInstance.isShow = false
    }
  }
}

添加实例方法

export default {
 install: function (Vue, Options) {
   ...
   Vue.prototype.$showLoading = function () {
     LoadingInstance.isShow = true
   }
   Vue.prototype.$hiddenLoading = function () {
     LoadingInstance.isShow = false
   }
 }
}

4. 在main.js中导入插件

注意: 这里需要导入插件的index.js文件
Vue.use()方法中的第二个参数即是传给install方法的第二个参数

import Loading from './plugin/loading/index.js'

Vue.use(Loading, {
  title: '皇帝不急太监急'
})

5. 在App.vue中使用

效果：