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), "@@@@###");

六、效果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/36745.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3 【提效】使用 CSS 框架 UnoCSS 实用教程

该换种更高效的方式写 CSS 啦&#xff0c;举个例&#xff1a; <div class"flex"> </div>相当于 <div class"flex"> </div> <style> .flex {display: flex; } </style>当然&#xff0c;还有超多强大的功能帮我们提升…

江科大笔记—FLASH闪存

FLASH闪存 程序现象&#xff1a; 1、读写内部FLASH 这个代码的目的&#xff0c;就是利用内部flash程序存储器的剩余空间&#xff0c;来存储一些掉电不丢失的参数。所以这里的程序是按下K1变换一下测试数据&#xff0c;然后存储到内部FLASH&#xff0c;按下K2把所有参数清0&…

注册中文网址(中文域名)有什么用?

随着互联网的全球普及&#xff0c;域名系统作为网络空间的门牌号&#xff0c;其重要性不言而喻。长久以来&#xff0c;英文域名占据了主导地位&#xff0c;但随着国际化域名&#xff08;IDN&#xff0c;Internationalized Domain Name&#xff09;技术的发展&#xff0c;注册中…

检索增强生成RAG系列2--提高RAG准确度的关键点

上一章讲到了RAG的基本流程&#xff0c;但是如果只是完成一个基本流程&#xff0c;想要在商业上使用还是不行&#xff0c;因为正常商业上的使用其准确度至少有个90%甚至更高。那么如何提高RAG的准确度&#xff0c;那么需要看看RAG有哪些关键点。 目录 1 RAG结构图2 文档处理3 …

【PyQt5】一文向您详细介绍 QVBoxLayout() 的作用

【PyQt5】一文向您详细介绍 QVBoxLayout() 的作用 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&a…

前端面试题(基础篇十一)

一、DOCTYPE 的作用是什么&#xff1f; <!DOCTYPE> 声明一般位于文档的第一行&#xff0c;它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析&#xff0c;否则就以兼容模式进行解析。在标准模式下&#xff0c;浏览器的解析规…

速盾:ddos高防ip是什么?

DDoS攻击是一种通过向目标网络发送大量的无效请求&#xff0c;以致其无法正常运作的攻击方式。这种攻击方式广泛应用于各种网络服务&#xff0c;如网站、服务器、游戏等。由于DDoS攻击可以导致被攻击的网络瘫痪&#xff0c;因此许多组织和个人都开始关注网络安全&#xff0c;并…

什么是C++模块化系统?C++20的模块化系统。

C20引入的模块化系统是一种新的代码组织和编译机制&#xff0c;它旨在替代传统的头文件机制&#xff0c;提供更好的代码组织、更快的编译速度和更强的封装性。模块化系统的主要目标包括&#xff1a; 减少编译时间&#xff1a;通过减少冗余的头文件解析和宏定义传播&#xff0c…

Nest使用multer实现文件上传,并实现大文件分片上传(下)

上节我们学了在 Express 里用 multer 包处理 multipart/form-data 类型的请求中的 file。 单个、多个字段的单个、多个 file 都能轻松取出来。 接下来我们就来学习一下在Nest 里使用multer。 一,Nest如何使用multer实现文件上传 首先我们先创建一个Nest项目&#xff1a; nest…

性能测试4【搬代码】

性能测试4与性能测试3最后的 三、性能瓶颈分析和性能调优 (1)基准测试 (2)负载测试 (3)压力测试 (4)浪涌测试 (5)容量测试 有关&#xff0c;需要结合看 性能瓶颈分析和性能调优 (1)基准测试 一般是单接口&#xff08;单交易&#xff09;&#xff1a;使用一个用持续压测1min以…

【Linux系列】Fedora40安装VMware Workstation Pro报错

问题描述 由于Fedora 40使用的Linux内核是6.9,导致安装VMware Workstation Pro 时&#xff0c;安装依赖无法成功&#xff0c;具体报错如下 ..................CC [M] /tmp/modconfig-a8Fcf5/vmnet-only/smac.oCC [M] /tmp/modconfig-a8Fcf5/vmnet-only/vnetEvent.oCC [M] …

液体粒子计数器的原理及常见型号选择 lighthouse代理商北京中邦兴业

​液体颗粒计数用于测量液体样品中颗粒的大小和分布。通过用激光二极管照射液体样品并检测散射光来测量颗粒分布和尺寸。散射光的性质与粒子大小的大小有关。液体颗粒计数器可用于批量取样或在线&#xff08;连续监测&#xff09;应用&#xff0c;如水处理厂&#xff0c;或用于…

【封装】Unity编辑器模式GUID加载资源

介绍 在编辑器模式下通过GUID获取工程目录下的指定资源的接口工具封装 工具原理 借助AssetDatabaseAPI FindAssets : 获取 GUID GUIDToAssetPath : 通过GUID获取路径LoadAssetAtPath<T>: 通过路径加载资源 代码&#xff1a; public static class GetAssetUtil {pub…

ADC位数、增益调制与参考电压

位数&#xff1a;12bit、10bit、8bit 一般就是对应的ADC值分别为&#xff1a;4095、1023、255&#xff0c;也就选用对应位数时ADC的最大值。 增益的作用 增益设置用于放大或缩小输入信号&#xff0c;使其适配到ADC的输入范围。增益设置可以通过配置SAADC的通道配置寄存器来实…

Vscode lanuch.json

Intro 使用launch.json 能够方便的运行需要传很多参数的代码文件 如下&#xff1a; import math import argparse # 1、导入argpase包def parse_args():parse argparse.ArgumentParser(descriptionCalculate cylinder volume) # 2、创建参数对象parse.add_argument(--rad…

怎么处理整合了shiro的应用的RPC接口鉴权问题

这篇文章分享一下&#xff1a;当一个服务提供者整合了shiro安全框架来实现权限访问控制时&#xff0c;服务消费者通过feign请求服务提供者的接口时的鉴权不通过问题。 问题描述 博主有一个项目pms&#xff08;权限管理系统&#xff09;&#xff0c;使用了shiro框架来实现鉴权功…

【免费可视化工具】智慧港口全景监测大屏引领行业变革

在传统的港口运营中&#xff0c;人们往往要面对繁琐的数据、复杂的流程和不确定的风险。但随着科技的发展&#xff0c;智慧港口全景监测大屏&#xff0c;集数据整合、实时监控、智能分析于一体&#xff0c;为港口运营提供了全新的解决方案。 今天要说的是山海鲸可视化搭建的智慧…

Android 通知组

一. 通知组简介 从 Android 7.0&#xff08;API 级别 24&#xff09;开始&#xff0c;您可以在一个组中显示相关通知。如下所示: 图 1. 收起&#xff08;顶部&#xff09;和展开&#xff08;底部&#xff09;的通知组。 注意 &#xff1a;如果应用发出 4 条或更多条通知且未…

第十一次Javaweb作业

4.登录校验 4.1会话 --用户打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会话建立&#xff0c;直到有一方断开连接&#xff0c;会话结束。在一次会话中可以包含多次请求和响应。 会话跟踪&#xff1a;一种维护浏览器状态的方法&#xff0c;服务器需要识别多次请求…

Django(根据Models中模型类反向生成数据库表)—— python篇

一、数据库的配置 1、 django默认支持 sqlite&#xff0c;mysql, oracle,postgresql数据库。 sqlite&#xff1a;django默认使用sqlite的数据库&#xff0c;默认自带sqlite的数据库驱动 , 引擎名称&#xff1a;django.db.backends.sqlite3 mysql&#xff1a;引擎名称&#xff…