app.config.globalProperties

目录

一:基础使用

1、简介

2、使用

3、打印结果:

二:封装

1、创建一个.ts文件(utils/msg.ts)

2、在main.ts中全局注册

3、在页面中使用

4、打印结果


一:基础使用

1、简介

app.config.globalProperties是 Vue 3 应用实例(app)的一个配置属性,它允许你在整个应用范围内添加全局可用的属性。将一些常用的工具函数挂载到全局属性上,这样在组件中就可以直接调用这些函数,而无需重复导入。

复制代码
import { createApp } from 'vue';
import App from './App.vue';

// 创建 Vue 应用实例
const app = createApp(App);

// 添加全局属性
app.config.globalProperties.$mes= '这是一个全局消息';
app.config.globalProperties.$meFunction=()=>{
   return '这是个全局函数返回的方法'
};

// 挂载应用
app.mount('#app');

2、使用

复制代码
<template>
  <div>
    
  </div>
</template>

<script setup lang="ts'>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
console.log("proxy", proxy);
console.log("mes", proxy.$mes);
console.log("msFunction", proxy.$meFunction());
</script>

解释:

getCurrentInstance :**getCurrentInstance**函数用于获取当前正在活跃的组件实例。在 vue3的组合式 API 中,由于不再像选项式 API 那样有一个明确的 **this**指向当前组件实例,当你需要访问组件实例的属性、方法或者上下文信息时,就可以使用 **getCurrentInstance**来获取当前组件实例

proxy :Vue 3 里,**app.config.globalProperties**可用于给应用添加全局属性,而借助 **getCurrentInstance**获取的 **proxy**对象能够访问这些全局属性。

3、打印结果:

如果属性很多,不可能全部写在main.ts中,有以下方法

二:封装

1、创建一个.ts文件(utils/msg.ts)

复制代码
export const msgFunction = (value: any) => {
  return value;
};

2、在main.ts中全局注册

复制代码
import { createApp } from 'vue';
import App from './App.vue';

// 创建 Vue 应用实例
const app = createApp(App);
import { msgFunction } from "./utils/msg";

// 添加全局属性
app.config.globalProperties.$msgFunction = msgFunction;

// 挂载应用
app.mount('#app');

3、在页面中使用

复制代码
<template>
  <div>
    
  </div>
</template>

<script setup lang="ts'>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
console.log("proxy", proxy.$msgFunction("你好"));
</script>

4、打印结果

相关推荐
ankleless12 分钟前
C语言(12)——进阶函数
前端·html
一条上岸小咸鱼16 分钟前
Kotlin 基本数据类型(四):String
android·前端·kotlin
我是哈哈hh30 分钟前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清1 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
一枚前端小能手1 小时前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
晴空雨1 小时前
React 合成事件原理:从事件委托到 React 17 的重大改进
前端·react.js
魏嗣宗1 小时前
Node.js 网络编程全解析:从 Socket 到 HTTP,再到流式协议
前端·全栈
pepedd8641 小时前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
pepedd8641 小时前
浅谈js拷贝问题-解决拷贝数据难题
前端·javascript·trae
@大迁世界1 小时前
useCallback 的陷阱:当 React Hooks 反而拖了后腿
前端·javascript·react.js·前端框架·ecmascript