Vue插件实现

插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种：

1. 添加全局方法或者属性，如: vue-element

2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch

3. 通过全局 mixin方法添加一些组件选项，如: vuex

4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

一、声明插件

var toast = {};

toast.install = function(Vue, options) {

}

module.exports = toast;

二、编写插件

toast.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 (options) {

  // 逻辑...

}

}

module.exports = toast;

三、注册插件

通过全局方法 Vue.use() 使用插件:

Vue.use(toast);

也可以传入一个选项对象:

Vue.use(toast,  {});

四、使用插件

以下详细说明每种插件实现以及使用方法

1、添加实例方法或属性（给组件使用）

通过prototype来添加方法和属性

//让输出的数字翻倍，如果不是数字或者不能隐式转换为数字，则输出null

Vue.prototype.doubleNumber = function (val) {

  if (typeof val === 'number') {

    return val * 2;

  } else if (!isNaN(Number(val))) {

    return Number(val) * 2;

  } else {

    return null

  }

}

//用法：假设有这样一个组件

<template>

  <div>

    {{num}}

    <button @click="double">点击后让左边的数字翻倍</button>

  </div>

</template>

<script>

  export default{

    data(){

      return {

        num: 1

      }

    },

    methods: {

      double: function () {

        //这里的this.doubleNumber()方法就是上面写的组件里的方法

        this.num = this.doubleNumber(this.num);

      }

    }

  }

</script>

注意：

1、不管是【按值传递类型】还是【按引用传递类型】，该变量都不会被不同组件所共享，更准确的说，假如有A、B两个组件。A组件里的number数值改变，B组件里的number数值是不会跟着改变的。因此不要想着引用这样一个变量，然后修改了A中的值，B里也自动跟着改变了；

2、当组件里没有该属性时，调用时，显示的是通过插件获取的值；

当组件里有该属性时，调用时，显示的是组件里该属性的值；

由此而推，函数也是这样的，组件里的同名函数总是会覆盖插件提供的函数。

也就是说，当插件提供一个属性时，组件里没这个属性，就用插件的属性；组件有，就用组件自己的。

2、添加全局方法或属性（vue对象使用）

给Vue对象添加一个属性

Vue.test = function () {

  alert("123")

}

使用：

//注意先导入Vue对象才能使用

Vue.test()

3、注入组件

像写Vue组件时，那样写，方法名保持一致，其会在执行每个组件对应的方法名之前执行

Vue.mixin({

　　created: function() {    // vue实例本身就有的方法

　　　　console.log("组件开始加载")

　　},

　　methods: {　　// vue实例本身就有的方法

　　　　text: function () {　　// 非vue实例本身就有的方法

　　　　　　console.log("mixin test");

　　　　}

　　}

})

代码会在每个组件（包括根组件）的created执行之前执行。

可以自行在每个组件的created方法里写一段console.log来查看测试

假如是写给例如methods属性的某个方法，

组件里若本身有test方法，并 不会 先执行插件的test方法，再执行组件的test方法。

而是只执行其中一个，并且优先执行组件本身的同名方法

总结：

1、如果同时有多个插件注入一个方法（例如created，那么会先执行先注入的那个方法，再依次执行后注入的，最后执行组件本身的）

2、注意，像methods属性下的方法，并不会在组件注入后每个都执行，而是只执行一个，并且优先执行组件本身的

4、添加全局资源

添加方法和正常添加方法类似，甚至几乎一样。

可以添加【自定义指令】、【过滤器】、【过渡等】，这里以【过滤器】为例

//时间格式化过滤器，输入内容是number或者Date对象，输出是YYYY-MM-DD HH-MM-SS

Vue.filter('formatTime', function (value) {

  Date.prototype.Format = function (fmt) { //author: meizz

    var o = {

      "M+": this.getMonth() + 1, //月份

      "d+": this.getDate(), //日

      "h+": this.getHours(), //小时

      "m+": this.getMinutes(), //分

      "s+": this.getSeconds(), //秒

      "q+": Math.floor((this.getMonth() + 3) / 3), //季度

      "S": this.getMilliseconds() //毫秒

    };

    if (/(y+)/.test(fmt))

      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

    for (var k in o)

      if (new RegExp("(" + k + ")").test(fmt))

        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

    return fmt;

  }

  return new Date(value).Format("yyyy-MM-dd hh:mm:ss");

})

使用：正常使用

如：{{num | formatTime}}

 

附上小demo：