Vue3挂载全局属性和方法

最新推荐文章于 2024-04-16 13:43:13 发布
最新推荐文章于 2024-04-16 13:43:13 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： vue 文章标签： vue.js 前端
原文链接：https://blog.csdn.net/qq_39928481/article/details/123943184?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168500148716800184194687%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168500148716800184194687&biz_i
版权

mian.js文件

创建app实例后，开始在实例上挂载全局变量/方法

app.config.globalProperties.属性名（方法名） = 值

 在组件中，读取全局变量（方法）

 通过打印getCurrentInstance()，我们可以发现结果数据中的ctx的值和proxy的值是一样的，所以在获取全局变量的时候可能会 通过ctx去实现，需注意的是 -- ctx打包后在生产环境下是获取不到的，为了保证项目的正常运行，正常应该使用 proxy。

也就是说：{ctx}=getCurrentInstance()和{proxy}=getCurrentInstance()的结果是一样的，但是正确应该使用后者。

参考文章：关于Vue3里面的getCurrentInstance：可以获取挂载在全局的属性和获取上下文_口袋の的天空的博客-CSDN博客

Lee_Yu_Fan
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue定义全局变量和全局方法的方法示例
10-18
主要介绍了vue定义全局变量和全局方法的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3全局属性/方法的创建及使用--app.config.globalProperties(支持ts)
最新发布
m0_71537867的博客
04-21 857
有时一些属性值或方法想要在很多个组件中被使用，且想要进行统一管理，此时就可以将这些属性值或方法注册在能够被应用内所有组件实例访问到的对象中。我们将想要全局使用的属性或方法注册在app.config.globalProperties对象中，就可以在应用内的任意组件中使用。
vue3全局挂载方法
weixin_38225763的博客
04-16 339
模板页面index.vue 在项目根目录下，引用了 main.js文件。
Vue3挂载全局方法及组件中如何使用
m0_46165586的博客
07-11 6889
在Vue3项目中，需要频繁使用某一个方法。配置到全局感觉会方便很多。例如：因为很多页面都需要对时间进行格式，所以将时间格式函数配置到全局。
Vue3之通过setup语法糖及setup函数获取全局属性
yuanjinshenglife的专栏
03-11 756
Vue3之通过setup语法糖及setup函数获取全局属性
vue3-全局方法（简介特点，注册组件，成员属性，指令，混入，插件）
阿牛哥的博客
01-29 769
vue3-全局方法（简介特点，注册组件，成员属性，指令，混入，插件）
Vue3 挂载全局属性和方法
m0_63969219的博客
05-04 1万+
方式一 app.config.globalProperties 在main.js中引入全局要使用的方法，通过app.config.globalProperties添加到全局中。例： // main.js import { createApp } from 'vue' import App from './App.vue' // test 是外部引入的方法 const test = () => { console.log('ccccc') return '测试成功001' } con
Vue3 挂载全局方法
Bunny的博客
07-19 2091
Vue3全局挂载
vue3中挂载全局变量
热门推荐
weixin_43090018的博客
05-24 3万+
vue2.x挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法 在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了另一种方法来让我们使用， 上代码 首先在main.js中写入我们需要挂载的一个变量，比如一个地址吧 main.js import { createApp } from 'vue' import App from './App' import store from '@s
Vue3挂载全局方法的两种方法
qq_44741577的博客
02-04 1168
Vue3 不推荐在原型链上挂载一些东西这种方式，而是更建议使用方式。
vue组件挂载到全局方法的示例代码
10-18
主要介绍了vue组件挂载到全局方法的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2 全局变量的设置方法
08-27
下面小编就为大家分享一篇vue2 全局变量的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue里面设置全局变量或数据的方法
11-28
实例如下： const MyPlugin = { ...此方法可以单独起一个文件，在引入到需要的页面里面，就可以用vue实例取到相应数据，像以下use后，取数据时和取每个模块里面的data里面的数据方法是一样的 import MyPligin from
vue2 vs vue3 --可访问的全局属性对象(vue2通过vue.property原型链\ vue3通过app.config.globalProperties）
Penk的博客
11-13 544
有时候遇到一些面试官，他会问Vue3如何获取当前实例。其实一开始听这句话是有歧义的，因为不知道面试官说的是根实例还是组件的实例。所以我们一般可以反问一下~选项式api，直接用this就可以直接访问了；组合式api，都不用this，直接就可以访问了。本文主要是讲解Vue2，Vue3获取当前根实例的公共属性以及方法的区别。
Vue3之通过Vue.config.globalProperties注册全局属性
yuanjinshenglife的专栏
03-11 821
Vue3之通过Vue.config.globalProperties注册全局属性
Vue3全局属性app.config.globalProperties
小马甲
01-01 1464
在main.ts文件中设置//全局方法app.config.globalProperties.$type = '类型';本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
vue3 项目实践总结
halo1416的博客
05-29 1698
3. 如果想要通过 proxy， ctx 访问当前组件的变量，需要在onBeforeMount 和 mounted生命周期中，即在组件挂载之后才可访问，否则访问不了；1. 使用 ctx ，经过测试后，打包到dist以后，ctx下面的值是拿不到的，即只能在开发环境使用。的使用频率是很高的，每个组件（页面）都去这么引入/调用，会显得很麻烦。个人理解：只能在同步代码中使用，不能再异步代码中使用，所以，一般先在。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！
vue3 全局挂载公用方法
qq_42937179的博客
03-01 8099
vue3 全局方法
uniapp vue3原型挂载方法
03-26
在UniApp中，Vue3的原型挂载方法与Vue2类似，可以通过Vue.prototype.xxx = XXX的形式进行挂载。例如： ```javascript // main.js import { createApp } from 'vue' import App from './App' const app = createApp(App) // 自定义全局方法 app.config.globalProperties.$myMethod = function () { console.log('my method') } app.mount('#app') ``` 然后在组件中就可以使用$myMethod方法了： ```vue <template> <div> <button @click="$myMethod()">调用自定义方法</button> </div> </template> <script> export default { mounted () { this.$myMethod() // 调用全局方法 } } </script> ``` 注意，如果使用的是Vue2，挂载全局方法的方式是Vue.prototype.xxx = XXX，而不是app.config.globalProperties.xxx = XXX。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值