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

最新推荐文章于 2024-09-14 05:04:14 发布

han_hanker

最新推荐文章于 2024-09-14 05:04:14 发布

阅读量589

点赞数

分类专栏： vue

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

转载于：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 = false
Vue.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、写：

//让输出的数字翻倍，如果不是数字或者不能隐式转换为数字，则输出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
  }
}

3、用：

假设有这样一个组件：


2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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