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

转载于：http://www.jb51.net/article/108960.htm

Vue插件

概述

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

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

总体流程应该是：

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

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

1.声明插件

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

export default {  install: function (Vue, options) {    // 添加的内容写在这个函数里面  }};

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

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

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

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

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

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

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

2.注册插件

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

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

import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import myplugin from './plugin/myplugin' //主要是这两行Vue.config.productionTip = falseVue.use(ElementUI)Vue.use(myplugin) //主要是这两行/* eslint-disable no-new */new Vue({  el: '#app',  router,   // router: router  template: '<App/>',  components: { App } //components: {App:App}})

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

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

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  }}

3、用：

假设有这样一个组件：

23456789101112131415161718192021<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>

我们便可以通过点击button按钮，让num的值，在每次点击都翻倍了。

4、假如添加的是属性：

例如：

?

1

Vue.prototype.number = 1;

会发生什么事情呢？

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

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

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

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

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