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

更新时间：2024年07月02日 09:24:04 作者：库库的写代码

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

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

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

在这里插入图片描述

二、编写自定义方法

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

三、引入到index.ts

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进行注册

//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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue + el-form 实现的多层循环表单验证
这篇文章主要介绍了vue + el-form 实现的多层循环表单验证，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下。
2020-11-11
深入理解Vue Computed计算属性原理
Computed 计算属性是 Vue 中常用的一个功能，本篇文章主要介绍了Vue Computed 计算属性原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
将 vue 生成的 js 上传到七牛的实例
本篇文章主要介绍了将 vue 生成的 js 上传到七牛的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue3关键字高亮指令的实现详解
这篇文章主要为大家详细介绍了vue3实现关键字高亮指令的相关资料,w文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
2023-11-11
el-table 选择框根据条件设置某项不可选中的操作代码
这篇文章主要介绍了el-table 选择框根据条件设置某项不可选中的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue组件二次封装的一些实用技巧总结
我们在做项目经常会遇到组件功能不能满足业务需求的时候,这时候需要在原有的组件上进行二次封装,下面这篇文章主要给大家介绍了关于Vue组件二次封装的一些实用技巧,需要的朋友可以参考下
2022-04-04
SpringBoot+Vue项目线上买菜系统源码展示
本线上买菜系统采用的数据库是Mysql，使用springboot框架开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点,需要的朋友可以参考下
2022-08-08
Vue.js教程之axios与网络传输的学习实践
这篇文章主要给大家介绍了Vue.js之axios与网络传输的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟随小编一起来学习学习吧。
2017-04-04
vue项目打包时自动更新版本号的实现方法
本文主要介绍了vue项目打包时自动更新版本号的实现方法,通过在根目录下创建autoVersion.js脚本文件,页面获取版本号时直接使用,修改package.json配置,感兴趣的可以了解一下
2025-02-02
Vue NextTick介绍与使用原理
我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果
2022-08-08