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：

 

 

转载于:https://www.cnblogs.com/jefferyE/p/7059535.html