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

相关推荐
束尘4 分钟前
React封装axios请求方法
前端·javascript·react.js
宇寒风暖22 分钟前
HTML块级元素和内联元素(简单易懂)
前端·css·笔记·学习·html
很萌很帅的恶魔神ww37 分钟前
HarmonyOS Next-三层架构之项目引用har包实战
javascript
计算机-秋大田40 分钟前
基于Spring Boot的宠物猫认养系统的设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·课程设计
赵大仁1 小时前
深入解析 React 最新特性:革新、应用与最佳实践
前端·react.js·前端框架
Gazer_S1 小时前
【前端文件下载实现:多种表格导出方案的技术解析】
前端·javascript·状态模式
冷琴19962 小时前
基于Python+Vue开发的旅游景区管理系统源码+运行步骤
vue.js·python·旅游
IT、木易2 小时前
大白话阐述react和vue高阶组件的概念、优势及应用场景,以及区别,给出简单高阶组件的实现代码
前端·vue.js·react.js
HaanLen2 小时前
React19源码系列之FiberRoot节点和Fiber节点
前端·javascript·react.js
冴羽2 小时前
SvelteKit 最新中文文档教程(3)—— 数据加载
前端·javascript·svelte