vue3.0中globalProperties的定义以及 globalProperties定义的字段在setup中用法

最新推荐文章于 2024-04-16 18:42:24 发布
最新推荐文章于 2024-04-16 18:42:24 发布
阅读量990 收藏
点赞数
分类专栏： 前端 html 文章标签： npm git github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuux666/article/details/123304124
版权
本文对比Vue2.0和3.0中全局属性的定义方式，重点介绍了Vue3.0中如何在main.js和组件内使用globalProperties，特别是在setup中的不同方法，包括使用ctx和proxy的注意事项。文章提供了官方解释和实例，帮助理解globalProperties的配置和访问机制。
摘要由CSDN通过智能技术生成
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中如何优雅地在 setup 使用 globalProperties
仰望星空的代码
09-15 1万+
一、前言 vue3 已经发布到 v3.2.x 版了，在项目中也使用上了 vue3，总体感觉还是不错的。vue3 中使用Proxy 来实现响应式数据，解决了 vue2 中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问题。vue3 中的模板可以包含多个根节点、v-model 参数化等等特性也很值得肯定。还没有使用 vue3 的开发者，推荐赶快上手试用。 二、令人困惑的 globalProperties vue3 中每个 vue 的实例都会对外暴露一个包含此应用实例的
vue3.0之全局变量app.config.globalProperties的使用
m0_67391401的博客
03-01 3058
globalProperties 类型：[key: string]: any 默认：undefined 用法 添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。 这可以代替 Vue 2.x Vue.prototype 扩展： // 之前(Vue 2.x) Vue.prototype.$http = () => {} // 之后(Vue 3.x) const app = Vue.createApp({}) app.config.glo
vue3 setup种使用全局变量 globalProperties
qq_45223390的博客
10-18 4704
getCurrentInstance 支持访问内部组件实例。 1.main.ts使用 app.config.globalProperties.$filter = { foo() { return 123 }, bar() { console.log("我是bar") return "我是bar" } } 2.在template中使用 {{ $filter.foo() }} 3.在setup中使用 const internalInstance = getCurre
Vue3.0如何在setup中获取定义的全局方法
wjw0125的博客
06-18 3282
有些情况下我们需要定义全局方法 然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的 我们这里就以定义在main.js中为例 // 这里我们就简单的随便添加一个属性 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' let app = cre
Vue3 app.config.globalProperties 全局属性如何在setup中使用
最新发布
weixin_51232434的博客
04-16 857
这样可以拿到属性并进行逻辑处理，但是如何在setup中渲染到模板中进行展示呢？1. 在main.ts中进行定义全局变量或函数。2. 在组件中进行使用。
vue3.0中setup使用(两种用法)
01-21
　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 　Vue3 的一大特性函数 —- setup...
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 ...
vue3.0中的双向数据绑定方法及优缺点
12-12
在 Vue 2.x 版本中，这一机制是通过 `Object.defineProperty` 来实现的，然而在 Vue 3.0 中，这一方法被 `Proxy` 替代，以提供更高效的数据绑定和更丰富的操作拦截。 在 Vue 2.x 中，`Object.defineProperty` 被...
vue3.0中使用postcss-pxtorem的具体方法
10-15
在Vue 3.0框架中，使用`postcss-pxtorem`是一个有效的方法，可以帮助开发者将CSS中的像素单位（px）转换为相对单位（rem），从而实现响应式布局，特别是在移动端设备上。`postcss-pxtorem`是一个PostCSS插件，它的...
前端框架vue3的js--vue.global.js
12-16
前端框架vue3的js--vue.global.js
Vue3.0中的monorepo管理模式的实现
12-13
【Vue3.0中的monorepo管理模式的实现】 在软件开发中，monorepo（单存储库）是一种代码管理策略，它将多个相关的项目或包放入一个单一的Git仓库中，而不是每个项目都有独立的仓库。Vue3.0采用了这种模式，这表明...
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
在Vue 3中，你可以混合使用Composition API和传统的Options API，为现有项目迁移提供了平滑过渡的可能性。 9. **Vue CLI 4及更高版本**： 配合Vue 3的发布，Vue CLI也升级到了4.x版本，提供更好的开发体验和更快...
在 vue-cli v3.0 中使用 SCSS/SASS的方法
08-27
在 Vue-cli V3.0 中使用 SCSS/SASS 的方法 在 Vue-cli V3.0 中使用 SCSS/SASS 是一个非常重要的知识点，下面我们将详细介绍如何在 Vue-cli V3.0 中使用 SCSS/SASS。 首先，在使用 Vue-cli 生成项目时，需要勾选 ...
初探Vue3.0 中的一大亮点Proxy的使用
10-17
主要介绍了初探Vue3.0 中的一大亮点Proxy的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3里面app.config.globalProperties的使用
m0_67392661的博客
03-09 2447
在main.js里面配置config const app = createApp(App); app.config.globalProperties.$user = { name: ‘梅长苏’, weapons: ‘长剑’, title: ‘刺客’ } 在template模板中使用 姓名：{{$user.name}} 在setup中使用 const cns = getCurrentInstance() console.log(cns.appContext.config.globalProper..
vue3中setup函数获取app.config.globalProperties中的全局变量
xxeryjy的博客
02-01 1022
【代码】vue3中setup函数获取app.config.globalProperties中的全局变量。
Vue3之通过Vue.config.globalProperties注册全局属性
yuanjinshenglife的专栏
03-11 1106
Vue3之通过Vue.config.globalProperties注册全局属性
vue3用setup组合API实现app.config.globalProperties注册全局属性的对象
weixin_43915236的博客
08-29 909
vue3用setup组合API实现app.config.globalProperties注册全局属性的对象
vue3.0中setup写方法
04-22
在 vue3.0 中，使用 setup 方法写组件的代码比之前的 Options API 更加简洁和直观，同时也更加灵活。通过使用 setup 方法，我们可以直接访问组件实例中的属性和方法，而不需要通过 this 进行访问。setup 函数也提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值