Vue3定义全局函数和变量

鹿 / 2023-08-23 / 原文

定义全局函数

Vue2 和 Vue3 的区别

由于 Vue3 没有 Prototype 属性，所以需要在 main.ts 文件里使用 app.config.globalProperties 去定义全局函数和变量

Vue2：

// 之前 (Vue 2.x)
Vue.prototype.$http = () => {}
Vue3：
// 之后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}
定义一个全局变量，示例如下：








app.config.globalProperties.$env = "dev";








 




在 Vue3 移除了过滤器，定义一个全局函数代替 Filters，示例如下：






app.config.globalProperties.$filters = {
  format<T extends any>(str: T): string {
    return `衔蝉-${str}`;
  }
}




 




以上定义完成后，还需要声明一下文件，不然 TS 无法正确推导类型






type Filter = {
    format<T>(str: T): string
}

// 声明要扩充@vue/runtime-core包的声明
// 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
declare module 'vue' {
    export interface ComponentCustomProperties {
        $filters: Filter;
        $env: string;
    }
}






写好的全局函数或变量，可以直接在其他组件中使用






<template>
  <div>{{ $env }}</div>
  <div>{{ $filters.format("鲜花") }}</div>
</template>






 


想在 setup 里使用全局变量/方法,


可以用 getCurrentInstance 读取到当前实例






<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";

// 读取当前实例
const app = getCurrentInstance();
console.log(app?.proxy?.$filters.format("TS"));
console.log(app?.proxy?.$env);

</script>




 



啊快发货快







                    

                

            

        

    

    

        

            
Vue3定义全局函数和变量更多相关文章

            

            

                                    
AJAX & AXIOS-2024/11/1

                                    
验证码处理在自动化测试中的应用

                                    
Java，启动！

                                    
2024/11/1日 日志 关于JavaScript简介&引入方式 以及基础语法的学习

                                    
android 13 更改手机信号调整

                                    
BFS(Breath First Search 广度优先搜索)

                                    
Angular 18 上手开发

                                    
单链表题+数组题（快慢指针和左右指针）

                                    
MySQL和Easy-Es语法对照表

                                    
DevOp相关

                                    
CSRF攻击与防御

                                    
华为云开源项目Sermant正式成为CNCF官方项目

                                    
spring-boot-configuration-processor无法生效

                                    
给网站添加春节灯笼效果：引入即用，附源码！

                                    
如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

                                    
程序员的修炼之路

                                    
Java-中文官方教程-2022-版-一-

                                    
Java-中文官方教程-2022-版-五-

                                    
Java-中文官方教程-2022-版-四-

                                    
Java-中文官方教程-2022-版-六-

                            

        

    

    

        

            
随机推荐

            

            

                                    
C语言中的编译过程详解

                                    
step7 V5.x上的SCL

                                    
yolo --- 核心思想

                                    
【游记】CCPC 济南 2024 游记

                                    
AJAX & AXIOS-2024/11/1

                                    
验证码处理在自动化测试中的应用

                                    
一些学科笑话

                                    
NOIP2024模拟赛20 & 11.1 小记

                                    
20241101 数据结构与算法期中机试收获

                                    
Java，启动！

                                    
什么是IT技术

                                    
即将到来！

                                    
2024/11/1日 日志 关于JavaScript简介&引入方式 以及基础语法的学习

                                    
舍得-时间-工作是人的一生最重要的事情-自己要有私房钱-人的一生最重要的事情是书写自己的人生

                                    
2.TiUP 部署 DM 集群

                                    
原型模式的C++实现

                                    
python bytecode解析

                                    
09-XSS键盘监听、cookie窃取&文件上传绕过

                                    
ubuntu 24.04 部署 mysql 8.4.3 LTS

                                    
国标GB28181公网平台LiteGBS国标GB28181视频平台建筑工地无线视频联网监控系统方案

                            

        

    


    

        

            

                

                    
热门话题

                    

                    

                                                                                    
Ethernaut Level 11: Elevator Attack and Blockchain Interaction

                                                                                                                                                                    
快速部署开源spug运维平台的Docker安装指南

                                                                                                                                                                    
驱动调试之printk的原理与使用

                                                                                                                                                                    
计算机思维模型及其应用

                                                                                                                                                                    
华为云发布代码大模型PanGu-Coder2，实现高效代码生成

                                                                                                                                                                    
Linux多硬盘数据存储和分区操作

                                                                                                                                                                    
构建高可用架构: 分层冗余与自动故障转移

                                                                                                                                                                    
LoRA：高效调参的大语言模型适应方法

                                                                                                                                                                    
《分布式系统的基本原理及互联网分层架构的本质》

                                                                                                                                                                    
Hadoop写流程解析

                                                                                                                                                                    
Java架构师的系统架构设计方法论中的规范要点

                                                                                                                                                                    
使用observeDOM解决BetterScroll插件在移动端无法滑动的问题

                                                                                                                                                                    
互联网一致性架构设计实践

                                                                                                                                                                    
高并发系统架构与水平扩展

                                                                                                                                                                    
混合应用的崛起：跨平台开发取代原生应用

                                                                                                                            

                

            

        

    


            

        

    







    

        

            
   穗舟网
                    （www.seizhou.com）

            
本站除标明"本站原创"外所有文章版权归创作人所有，本站不承担任何法律责任和连带责任，如有冒犯请直接联系，我们将立即予以纠正并致歉。

        

        

            
                Powered by WordPress
                 · 
                v1.0.0-alpha