当前位置: 首页 > article >正文

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


http://www.kler.cn/a/585156.html

相关文章:

  • 语言识别模型whisper学习笔记
  • Odoo Http鉴权+调用后端接口
  • 爱普生车规级晶振SG2520CAA智能汽车电子系统的应用
  • JavaScript 函数基础
  • 【区块链】btc
  • HTTP 各版本协议简介
  • 交易所开发:数字市场的核心动力
  • HDU 学数数导致的
  • pjsip pjsua_media_config 结构体说明
  • 【MySQL】表的约束(上)
  • 如何筛选能实现共享自助健身房“灵活性”的物联网框架?
  • Java8的新特性
  • mov格式视频如何转换mp4?
  • C++ 左值(lvalue)和右值(rvalue)
  • DSTTN
  • Kafka×DeepSeek:智能决策破取经八十一难!
  • 批量压缩与优化 Excel 文档,减少 Excel 文档大小
  • 嵌入式八股ARM篇
  • MyBatis·下
  • AGI大模型(3):大模型生成内容