vue3中globalProperties的踩坑及使用

置顶 已于 2022-03-06 21:55:06 修改
阅读量3.7k 收藏 5
点赞数 9
文章标签： vue.js 前端 javascript
于 2022-03-06 21:54:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53307014/article/details/123318022
版权

今天在写一个函数的时候发现在template上面怎么样都调用不了注册后globalProperties，然后上官方文档也没有详细说明在setup中如何使用globalProperties，然后直接查阅了很多文档，才解决了这个问题

这里注册完了一个$user

但是在template中还是找不到命名的$user

查询了官网文档,里面只说了options api的解决方案,但是没有提到setup.

然后查询了大量资料，终于找到了解决的办法！

 

下面的app.context.config.globalProperties是固定的写法！！！ 

就能显示出定义好的内容了。

隔壁班的小徐
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue3中如何优雅地在 setup 使用 globalProperties
仰望星空的代码
09-15 1万+
一、前言 vue3 已经发布到 v3.2.x 版了，在项目中也使用上了 vue3，总体感觉还是不错的。vue3 中使用Proxy 来实现响应式数据，解决了 vue2 中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问题。vue3 中的模板可以包含多个根节点、v-model 参数化等等特性也很值得肯定。还没有使用 vue3 的开发者，推荐赶快上手试用。 二、令人困惑的 globalProperties vue3 中每个 vue 的实例都会对外暴露一个包含此应用实例的
vue3 全局注册app.config.globalProperties， 如何处理getCurrentInstance 上下文线上环境报错
web18334137065的博客
03-01 809
vue3挂载全局属性和方法，使用app.config.globalProperties， 但是在组件中获取全局上下文的时候getCurrentInstance会在线上环境报错。 搜索了一遍，看了好多文章，都是在本地环境getCurrentInstance有用，线上环境报错，所以一切的一切还是去官网查找，得到最后的完美结果。 线上环境正确使用： const instance = getCurrentInstance() console.log('instance???', instance.appConte
修改app.config不能马上生效（只有重启应用程序之后才能生效）的根本原因
dmz1981的专栏
07-03 4208
修改app.config不能马上生效（只有重启应用程序之后才能生效）的根本原因： 1：之前的代码： this.ntxtLenForValue.Text = Properties.Settings.Default.LenForValue; 2：现在的代码： 直接读取应用程序所在目录的配置文件(其实就是XML文件) 第一步： //读取app.config文件，然
【小白成长记】vue3项目中通过globalProperties定义与使用全局数据
最新发布
youyoufenglai的博客
03-20 294
vue3项目中通过globalProperties定义与使用全局数据
Vue3 globalProperties 的使用（代替 Vue.prototype.$xxx）
卡尔特斯
07-28 3926
代码】Vue3globalProperties的使用（代替Vue.prototype.$xxx）
vue3 中 app.config.globalProperties 怎么使用
weixin_42602241的博客
12-29 1224
vue3 中的 app.config.globalProperties 是一个全局配置选项，可以用来配置在 Vue 实例中全局可访问的属性。 使用方法如下： 在创建 Vue 实例之前，设置 app.config.globalProperties 选项： import { createApp } from 'vue'; const app = createApp({ // 配置全局属性 ...
vue3.0中globalProperties的定义以及 globalProperties定义的字段在setup中用法
浩星
03-02 2万+
前言： vue3.0中的全局定义属性值和2.0是不一样的，是使用了globalProperties，而且跟我们2.0中可以用 this.+我们挂载的属性名 的用法相比，我们3.0的使用 方法是不一样的，这里总结下 2.0 main.js中 import api from './api' // 导入api接口 Vue.prototype.$api = api Vue.prototype.$abc = 111 页面上： this.$api.user... let abc...
Vue3中的公共数据配置globalProperties getCurrentInstance、网络代理配置
看见小狮子没
09-21 1万+
1、
Vue3之app.config.globalProperties（定义全局变量）
小白的豪豪
07-11 7361
一般我们在vue开发中，常用的功能，接口等等我们都会封装起来，如何每次创建一个组件，想要使用这些封装起来的功能、接口等等都需要先引入，再通过层层调用才可以得到结果，如果我现在一遍需要调用后端接口、验证n种输入框，且这些方法都不在同一个文件当中，我们就需要不断引入，相当麻烦。所以就会想着能否将这些常用的，都存放在一块，需要调用的时候，只需要引入一个，既可得到所有分装起来的功能。
vue3中globalProperties的使用及ts类型定义
chengcheng_wu的博客
06-08 4496
vue3中globalProperties的使用及ts类型定义 总结 上面的declare module ‘@vue/runtime-core’ 是对ComponentCustomProperties 的一个补充说明，ts的精髓在于它的类型约束，这样可以在其它组建中使用自定义属性时可以获得类型提示和类型的约束...
前端笔记(4) Vue3 全局属性 app.config.globalProperties 使用案例
Java Spring Elasticsearch
08-02 1万+
学习Vue3有个把月了，记录下学习中的小知识点。首先很多同学还没找到Vue3真正的官方文档，下面给出Vue3的文档网站Vue3官网文档Vue3API文档。
详解vue中使用protobuf踩坑记
10-17
主要介绍了vue中使用protobuf踩坑记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
Vue3 从零搭建项目及插件的使用
01-20
Vue3 从零搭建项目及插件的使用，完整代码
vue3如何设置全局过滤器、app.config.globalProperties如何使用配置
红烧咸咸鱼
07-28 1335
vue3如何全局注册过滤器 app.config.globalProperties如何配置使用
vue3之全局变量app.config.globalProperties的使用
热门推荐
samscat的博客
12-15 2万+
在main.js里面配置config const app = createApp(App); app.config.globalProperties.$user = { name: '梅长苏', weapons: '长剑', title: '刺客' } 在template模板中使用 <p>姓名：{{$user.name}} </p> 在setup中使用 const cns = getCurrentInstance() console.log(c.
vue3使用全局扩展属性app.config.globalProperties
wangfei0225_的博客
05-16 2455
vue3的全局扩展属性
Vue3全局属性app.config.globalProperties
小马甲
01-01 1376
在main.ts文件中设置//全局方法app.config.globalProperties.$type = '类型';本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
vue3使用globalProperties
07-14
Vue 3 中的 globalProperties 是一个新的特性，它允许我们在应用程序的任何地方访问全局属性或方法。 要使用 globalProperties，你需要在创建 Vue 应用程序实例之前，通过 `app.config.globalProperties` 方法将属性或方法添加到全局范围内。例如，假设我们想在应用程序中访问一个名为 `api` 的全局属性，可以按照以下步骤操作： 1. 导入 `createApp` 函数和你的应用组件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; ``` 2. 创建 Vue 应用程序实例： ```javascript const app = createApp(App); ``` 3. 使用 `app.config.globalProperties` 添加全局属性： ```javascript app.config.globalProperties.api = 'https://example.com/api'; ``` 现在，你就可以在任何组件中使用 `$api` 来访问这个全局属性了： ```javascript export default { mounted() { console.log(this.$api); // 输出 https://example.com/api } } ``` 除了添加属性，你还可以添加全局方法。例如，我们可以添加一个名为 `$log` 的全局方法来简化日志记录： ```javascript app.config.globalProperties.$log = (message) => { console.log(`[LOG]: ${message}`); }; ``` 现在，在任何组件中都可以使用 `$log` 方法来记录日志： ```javascript export default { mounted() { this.$log('Hello, world!'); // 输出 [LOG]: Hello, world! } } ``` 这就是 Vue 3 中使用 globalProperties 的基本用法。希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值