Vue3中Vue.prototype.$project = base.getProjectName()的语法如何使用?

news/2025/3/13 20:11:02/

  在 Vue 3 中,Vue.prototype 已被移除,不能再直接向 Vue 的原型上添加全局属性或方法。取而代之的方式是使用 app.config.globalProperties 进行全局属性的挂载。

替代方式

  如果你想在 Vue 3 中实现类似 Vue.prototype.$project = base.getProjectName() 的功能,可以这样做:

import { createApp } from 'vue';
import App from './App.vue';
import base from './base'; // 假设 base 里有 getProjectName 方法const app = createApp(App);// Vue 2 写法:Vue.prototype.$project = base.getProjectName()
// Vue 3 写法:
app.config.globalProperties.$project = base.getProjectName();app.mount('#app');

在组件中使用

  在 Vue 组件中,你可以通过 this.$project 访问该全局属性:

<script setup>
import { getCurrentInstance } from 'vue';const instance = getCurrentInstance();
console.log(instance.appContext.config.globalProperties.$project);
</script>

  或者在 Options API 里直接使用:

<script>
export default {mounted() {console.log(this.$project); // 访问全局属性}
}
</script>

更推荐的做法

  虽然 app.config.globalProperties 提供了类似 Vue.prototype 的功能,但在 Vue 3 中,官方更推荐使用 依赖注入(Provide/Inject) 或 Pinia(Vuex 替代方案) 来管理全局状态,尤其是复杂的项目。

  如果是简单的全局配置,可以使用 provide/inject:

// main.js
app.provide('projectName', base.getProjectName());

  然后在组件中使用:

<script setup>
import { inject } from 'vue';const projectName = inject('projectName');
console.log(projectName);
</script>

  这样会更加符合 Vue 3 的最佳实践。


http://www.ppmy.cn/news/1578871.html

相关文章

刷leetcode hot100--动态规划3.12

第一题乘积max子数组[1h] emmmm感觉看不懂题解 线性dp【计划学一下acwing&#xff0c;挨个做一下】 线性动态规划 相似题解析 最长上升子序列 最大上升子序列和 最大连续子段和 乘积最大子数组_哔哩哔哩_bilibili 比较奇怪的就是有正负数和0&#xff0c;如何处理&#xff1f…

更新vscode ,将c++11更新到c++20

要在CentOS系统中安装最新版本的GCC&#xff0c;你可以使用SCL&#xff08;Software Collections&#xff09;仓库&#xff0c;它提供了开发工具的最新版本。以下是安装步骤&#xff1a; 1、 添加SCL仓库&#xff1a; 首先&#xff0c;添加CentOS的SCL仓库&#xff0c;该仓库…

K8S学习之基础二十:k8s的coredns

K8S的coredns DNS&#xff08;DOMAIN NAME SYSTEM&#xff09;&#xff0c;就是域名系统COREDNS是DNS的一种&#xff0c;为集群提供服务发现功能&#xff0c;用来解析集群中生成的服务这里使用dig镜像来测试域名服务dig是继承了nslookup命令的一个镜像&#xff0c;上传到harbor…

STM32 单片机常见的 8 种输入输出模式

STM32 单片机常见的 8 种输入输出模式 文章目录 STM32 单片机常见的 8 种输入输出模式1. 浮空输入模式 (GPIO_Mode_IN_FLOATING)介绍使用场景示例代码 2. 上拉输入模式 (GPIO_Mode_IPU)介绍使用场景示例代码 3. 下拉输入模式 (GPIO_Mode_IPD)介绍使用场景示例代码 4. 模拟输入模…

前端 | 向后端传数据,判断问题所在的调试过程

目录 ​编辑 1. 在 vue 文件中&#xff0c;在调用函数之前 先打印传入的数据 2. 在 js 文件中&#xff0c;打印接收到的数据 3. 在浏览器 Network 面板查看请求数据 4. 在 server.js 中查看请求数据 5. 确保 JSON 格式正确 知识点&#xff1a;JSON.stringify(req.body, …

MAC查看自己真实IP命令

在 macOS 上&#xff0c;你可以通过以下步骤查看自己的真实 IP 地址&#xff1a; 1. 使用终端命令 打开“终端”应用程序&#xff08;可以在“应用程序” -> “实用工具”中找到&#xff09;&#xff0c;然后输入以下命令&#xff1a; ifconfig | grep "inet "…

【AI大模型智能应用】Deepseek生成测试用例

在软件开发过程中&#xff0c;测试用例的设计和编写是确保软件质量的关键。 然而&#xff0c;软件系统的复杂性不断增加&#xff0c;手动编写测试用例的工作量变得异常庞大&#xff0c;且容易出错。 DeepSeek基于人工智能和机器学习&#xff0c;它能够依据软件的需求和设计文…

2025年03月11日Github流行趋势

项目名称&#xff1a;pydoll 项目地址url&#xff1a;https://github.com/thalissonvs/pydoll项目语言&#xff1a;Python历史star数&#xff1a;1372今日star数&#xff1a;148项目维护者&#xff1a;thalissonvs, apps/github-actions, LucasAlvws, CaioWzy, Patolox项目简介…