vue全局方法plugins/utils的实现示例

2024-07-02 09:24:05 作者：库库的写代码

很多时候我们会在全局调用一些方法,本文主要介绍了vue全局方法plugins/utils的实现示例,具有一定的参考价值,感兴趣的可以了解一下

一、在src目录下创建一个plugins文件夹

test.ts文件存放创建的方法，index.ts用于接收所有自定义方法进行统一处理

在这里插入图片描述

// test.ts文件
export default {
  handleTest(val1: number, val2: number) {
    // 只是一个求和的方法
    return val1 + val2;
  },
};

vue对插件的安装可以分为两种方式

方式一：直接使用函数，在main.js中调用

//index.ts文件
import test from "./test";
export default function (app: any) {
  app.config.globalProperties.handleTest = test.handleTest;
}

方式二：使用对象，则必须给对象一个install属性

import test from "./test";
export default {
  install: function (app: any) {
      app.config.globalProperties.handleTest = test.handleTest;
  },
};

//main.ts文件
import pluginsfrom "./plugins";
app.use(plugins); //使用此方法会执行方法的函数或对象的install方法

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
console.log(proxy.handleTest(4, 3), "@@@@###");

在这里插入图片描述

到此这篇关于vue全局方法plugins/utils的实现示例的文章就介绍到这了,更多相关vue全局方法plugins/utils内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！