vue全局方法plugins/utils

news/2024/7/8 5:10:25 标签: vue.js, javascript, ecmascript

一、在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.niftyadmin.cn/n/5536600.html

相关文章

行业模板|DataEase旅游行业大屏模板推荐

DataEase开源数据可视化分析工具于2022年6月发布模板市场(https://templates-de.fit2cloud.com),并于2024年1月新增适用于DataEase v2版本的模板分类。模板市场旨在为DataEase用户提供专业、美观、拿来即用的大屏模板,方便用户根据…

easyquotation获取港股的bug

easyquotation:实时股票数据获取 easyquotation库,是一个非常好用的实时股票数据获取库,可以实时获取新浪、腾讯的免费股票行情,集思路的分级基金行情 安装 项目地址:https://github.com/shidenggui/easyquotation.…

Trinity Bots战场以及游荡佣兵设置相关

bots开关 NpcBot.Ebable.Raid 1 打开raid允许,这样团本也能带佣兵进去打了。 NpcBot.Ebable.BG 1 打开战场允许,这样战场也能带佣兵进去了。 NpcBot.Ebable.Arena 1 竞技场带佣兵。 默认已经开放的是: NpcBot.Ebable.Dungeon 1…

使用zdppy_api+onlyoffice word文档在线共同编辑,附完整的vue3前端代码和python后端代码

参考文档: https://api.onlyoffice.com/zh/editors/basic https://api.onlyoffice.com/zh/editors/coedit 基本的架构思考: 文档表:记录的是文档信息 key:这个key可以标识唯一的一个文档,可以是文档的hash值fileType…

Selenium:原理与使用指南

文章目录 简介Selenium 的原理安装 Selenium基本使用示例代码说明 常用操作查找元素交互操作等待处理弹窗 高级功能截屏执行 JavaScript切换窗口 结论 简介 Selenium 是一个用于 Web 应用程序自动化测试的强大工具。它提供了一系列库和工具,支持多种浏览器和编程语…

uniapp中webSocket使用Https访问连接失败

环境 uniapp写微信小程序,使用webSocket连接后台spring boot通信 在开发环境中使用 ws://xxx 连接正常, 但是微信小程序需要配置https访问,webSocket需要使用 wss:// 来连接, 使用wss:// 域名 访问时,一直连接不上&a…

在docker配置Nginx环境配置

应用于商业模式集中,对于各种API的调用,对于我们想要的功能进行暴露,对于不用的进行拦截进行鉴权。用于后面的付费 开发环境 正式上线模式 一、常用命令 停止:docker stop Nginx重启:docker restart Nginx删除服务&a…

Spring Boot中使用SpringEvent组件

Spring的事件机制是基于观察者模式的实现,主要由以下三个部分组成: 事件(Event):事件是应用中发生的重要事情,通常是一个继承自ApplicationEvent的类。 事件发布器(Publisher)&…