Vue插件写、用详解（附demo）

Vue插件

1、概述

简单来说，插件就是指对Vue的功能的增强或补充。

比如说，让你在每个单页面的组件里，都可以调用某个方法，或者共享使用某个变量，或者在某个方法之前执行一段代码等

2、使用方法

总体流程应该是：

【声明插件】——【写插件】——【注册插件】——【使用插件】

写插件和声明插件是同步的，然后注册到Vue对象中（不用担心重复注册），最后在写Vue组件的时候使用写的插件

声明插件

先写一个js文件，这个js文件就是插件文件，里面的基本内容如下：

/*  说明： *  插件文件：service.js *  作者：王冬  QQ：20004604 * */export default {  install: function (Vue, options) {    // 添加的内容写在这个函数里面  }};

其中install的第一个参数Vue表示的是Vue的实例，第二个参数表示的是一些设置选项。

Vue实例好理解，就是Vue对象。

而options设置选项就是指，在调用这个插件时，可以传一个对象。

例如这个对象有一个属性float，然后在写插件的一个方法/变量时，我需要输出一个数字，然后写一个if判断语句，

假如options.float为true时，输出浮点数；

假如为false或undefined（即没传参）时，输出为整数。

具体怎么添加，之后再说。

注册插件

如果使用过Vue-router，就很好理解，通过import引入后，然后通过 Vue.use(插件名) 注册插件；

例如，我们通常在main.js里引入各种东西，并且组件的根实例也在这里

//main.jsimport Vue from 'vue'import App from './App.vue'//关键是这两行import service from './service.js'Vue.use(service)new Vue({  el: '#app',  render: (h) => h(App)})

如代码中注释所说，关键是通过import导入service文件，然后在创建根组件之前，让Vue对象通过use方法来注册插件service。

通过这样简单的两步，就可以使用插件了。

3、写插件、使用插件

按照官方文档，写插件有四种方法，先给出官方的代码：

//以下内容都是添加到上面install的函数里面的// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {  // 逻辑...}// 2. 添加全局资源Vue.directive('my-directive', {  bind (el, binding, vnode, oldVnode) {    // 逻辑...  }  ...})// 3. 注入组件Vue.mixin({  created: function () {    // 逻辑...  }  ...})// 4. 添加实例方法Vue.prototype.$myMethod = function (options) {  // 逻辑...}

先给出最常用的：【4. 添加实例方法】的写法和使用方法

3.1【添加实例方法或属性】

1、核心思想：

通过prototype来添加方法和属性。

2、写：

//让输出的数字翻倍，如果不是数字或者不能隐式转换为数字，则输出nullVue.prototype.doubleNumber = function (val) {  if (typeof val === 'number') {    return val * 2;  } else if (!isNaN(Number(val))) {    return Number(val) * 2;  } else {    return null  }}