vue 全局函数学习总结

vue 全局函数

问题

项目中需要使用第三方的方法，如果每次都调用的话显得代码比较臃肿，所以想要封装一下多次调用的方法。

解决

使用vue 插件中的 开发插件

实现

• 创建一个公共函数文件夹 GlobalFun.js 文件夹
• 然后 Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

以上是官方文档上的写法。

亦可以这样写

/**
 * 全局函数
 * @type {install}
 */
exports.install=((Vue)=>{
    //全局函数 例子
    Vue.prototype.EXAMPLE = ((param) => {
        alert(param);
    });
    // Vue开发插件 https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6
    // Vue.myGlobalMethod = function () {
    //     console.log("myGlobalMethod")
    // };
    // // 4. 添加实例方法
    // Vue.prototype.$myMethod = function () {
    //     console.log("$myMethod")
    // }
});

• main.js 调用

• //全局函数 main.js
  import GlobalFun from "./utils/global_fun";
  
  Vue.use(GlobalFun);
  

• 调用使用 this.EXAMPLE(param) 就可以了。

注意 ：只有前缀是Vue.prototype. 的可以用 this.进行掉用,如果是Vue.myGlobalMethod 这种的应该先引用vue 在进行 Vue.myGlobalMethod() 调用。

import Vue from "vue";
...
Vue.myGlobalMethod();