vue添加插件

2024年4月13日 114次阅读 来源: 莉莉安

vue插件

概述

插件通常会为 Vue 添加全局功能。

使用方法

总体流程： 声明插件-写插件-注册插件-使用插件

声明插件

先写一个js文件，基本内容如下:

export default {
    install(Vue, options) {
        // 添加的内容写在这个函数里面
        //具体内容往下看
    }
}

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

写插件

按照官方文档，写插件有四种方法，

// 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
// 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
 // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
 // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }

在此使用最常用的第4种:添加实例方法，代码如下:

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

export default {
    install(Vue, options) {
        Vue.prototype.doubleNum = function(num) {
            if (typeof num === 'number' && !isNaN(Number(num))) {
                return num * 2;
            } else {
                return null;
            }
        }
    }
}
注册插件
//main.js
import Vue from 'vue'
import service from './service.js'
Vue.use(service)

关键: 引入后使用Vue.use()来注册插件

使用插件

在一个组件中:

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

原文:http://blog.csdn.net/qq200046…

    原文作者：莉莉安
    原文地址: https://segmentfault.com/a/1190000012242449
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞