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

检索增强生成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…

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;或用于…

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 条或更多条通知且未…

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

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

解决Transformer根本缺陷,所有大模型都能获得巨大改进

即使最强大的 LLM 也难以通过 token 索引来关注句子等概念&#xff0c;现在有办法了。 最近两天&#xff0c;马斯克和 LeCun 的口水战妥妥成为大家的看点。这两位 AI 圈的名人你来我往&#xff0c;在推特&#xff08;现为 X&#xff09;上相互拆对方台。 LeCun 在宣传自家最新论…

leetcode 动态规划(基础版)单词拆分

题目&#xff1a; 题解&#xff1a; 一种可行的dp做法是基于完全背包问题&#xff0c;将s看成是一个背包&#xff0c;wordDict看作是物品&#xff0c;然后往s中放入物品判断最终是否可以变为给定的s即可。这道题和上一题都用到了在dp如何枚举连续子串和状态表示&#xff1a;枚…

Golang 百题(实战快速掌握语法)_2

返回集合中满足指定条件的最后一个元素 本实验将实现判断给定集合中的元素是否符合&#xff0c;并返回符合的最后一个元素。 知识点 forfmt.Error 适合人群 本课程属于基础课程。需要用户掌握 Go 语言编程基础知识、计算机基础知识和 Linux 环境的基本用法。 许可证 内容…

潮玩手办盲盒前端项目模版的技术探索与应用案例

一、引言 在数字化时代&#xff0c;随着消费者对个性化和艺术化产品的需求日益增长&#xff0c;潮玩手办和盲盒市场逐渐崭露头角。为了满足这一市场需求&#xff0c;前端技术团队需要构建一个功能丰富、用户友好的在线平台。本文旨在探讨潮玩手办盲盒前端项目模版的技术实现&a…

FuTalk设计周刊-Vol.025

&#x1f525;&#x1f525;AI漫谈 热点捕手&#x1f525;&#x1f525; 1、耗时半年&#xff0c;实地调研&#xff01;泣血2万字&#xff0c;破除你的人工智能焦虑《2023最全AI商业落地调研报告》 链接https://www.bilibili.com/video/BV1YB4y1f7GE?share_sourcecopy_web &…

Vue3路由守卫的理解

官网:导航守卫 | Vue Router 目录 1.路由类型 1.1导航守卫 1.2路由独享 1.3组件内守卫 2.路由元信息 1.路由类型 1.1导航守卫 全局 :所有路由都会触发 router.beforeEach((to,from,next)>{}) router.afterEach((to,form,next)>{}) 1.2路由独享 路由表中的组件 be…