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、打印结果

相关推荐
何包蛋H1 分钟前
分享vue好用的pdf 工具实测
javascript·vue.js·pdf
PagiHi6 分钟前
iWebOffice2015 中间件如何在Chrome107及之后的高版本中加载
前端·javascript·chrome·中间件·edge·js
曾富贵19 分钟前
【eslint 插件】导入语句排序
前端·eslint
NaZiMeKiY29 分钟前
HTML5前端第八章节
前端·html·html5
远之喵1 小时前
js基础知识-考点
前端
SuperHua10011 小时前
还在用Pyinstaller打包python?试试轻量级的LightCode吧!
javascript·python
如此风景1 小时前
TS装饰器
前端
鱼樱前端1 小时前
React完整学习指南:从入门到精通(从根class->本hooks)16-19完整对比
前端·react.js
紫琪软件工作室1 小时前
ElementUI 级联选择器el-cascader启用选择任意一级选项,选中后关闭下拉框
前端·elementui·vue
思想永无止境1 小时前
vue elementUI组件国际化
前端·vue.js·elementui