vue3.0全局变量app.config.globalProperties的使用

这篇具有很好参考价值的文章主要介绍了vue3.0全局变量app.config.globalProperties的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

app.config.globalProperties是一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。是Vue2中Vue.prototype使用的一种替代,具体用法如下:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(store).use(router).mount('#app')

app.config.globalProperties.message = 'hello'// 自定义添加

1、在组合式api使用:

<script setup>
// 通过getCurrentInstance 获取
import { getCurrentInstance, onMounted } from 'vue'
const { message } = getCurrentInstance().appContext.config.globalProperties
onMounted(() => {
  console.log(message) // hello
})

</script>

2、在选项api中使用:文章来源地址https://www.toymoban.com/news/detail-672556.html

<script>
export default {
  mounted () {
    console.log(this.message) // hello
  }
}
</script>

到了这里,关于vue3.0全局变量app.config.globalProperties的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在uni-app使用vue3进行store全局数据共享

    在uni-app中使用vue3进行store的全局数据共享,网上文章太杂了,记录一下自己写的一个最简单易懂的例子,以供自己后面需要用到时候可以最直观的知道到底怎么实现 在index.js中写入代码如下(示例): uni-app好像内置vuex,不需要额外下载,如果记错了的话就得先去下载好 代

    2024年02月09日
    浏览(62)
  • vue3 ts 定义全局变量

    在 Vue3 中使用 TypeScript 定义全局变量可以这样做: 创建一个文件,如 global.d.ts ,并在其中声明全局变量。 在 main.ts 或其他入口文件中引入该文件。 在需要使用全局变量的地方直接使用即可。 注意,这种方式只能用于定义全局变量,不能用于定义全局函数或类。

    2024年02月17日
    浏览(35)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(58)
  • vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

    前言 我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题,本文逐一讲述该怎么样在vite.config.js中去配置。 一、配置代理端口和代理转发 vite.config.ts添加如下代码 ts.config.json添加如下代码 图片压缩先要引入vite-plugin-imagem

    2024年02月07日
    浏览(66)
  • uniapp引入全局js,vue2/vue3不同方式引入

    Hi I’m Shendi uniapp引入全局js,vue2/vue3不同方式引入 最近写小程序,个人开发,选用了 uni-app 进行开发 选用的 vue3 版本 因为我用的 vue3 版本,在这里踩了没学过vue3的坑,用vue2引入全局js的方式使用,导致undefined… Vue2 版引入全局js的方法如下 将js放到项目内,一般放到自建的

    2024年02月03日
    浏览(30)
  • 【Vue.js】Vue3全局配置Axios并解决跨域请求问题

    对于前后端分离项目,前端和后端端口不能重复,否则会导致前端或者后端服务起不来。例如前端访问地址为: http://localhost:8080/ ,后端访问地址为 http://localhost:8081/ 。后端写好Controller,当用Axios访问该接口时,将会报错: Access to XMLHttpRequest at \\\' http://localhost:8081/login \\\' from

    2024年02月05日
    浏览(50)
  • vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

    打包时,报警告,提示包太大会影响性能 在页面直接使用,直接使用 SVG 图标,当做一般的 svg 使用 icon使用时需要用以下两种方式方式: 如果用在el-button里面的icon属性上使用,用SVG方式无效,还是需要引入再使用(不知道有没有其他方式) 注意: 使用 :icon=\\\"Edit\\\" 则icon的大

    2024年02月06日
    浏览(43)
  • uni-app vue3 封装socket 兼容微信小程序 钉钉小程序 H5 App 全局唯一

    前端小伙伴使用uni-app开发长连接通信的时候都会有以下疑问 在网上搜到的封装socket都没讲怎么全局公用一个呢? 同一个 子协议或者我我们叫type类型型我想在两个页面都接受使用怎么做呢? 目前能搜到的socket 封装好像都没讲清楚这个东西,或者压根没考虑 下面给大家详细

    2024年02月13日
    浏览(37)
  • 关于css中设置变量用于全局Css或者Js中使用

    一、配置变量css文件 src/styles/variables.scss 二、在组件中使用变量

    2024年02月07日
    浏览(30)
  • 【Vue】全局变量的定义及使用

    首先 声明Vue 使用全局变量的方法有很多,以下只是个人觉得比较简洁的2种。其中两者的第一步操作相同,即: 方法1:在main.js中直接将全局变量挂载到Vue.prototype 用时不用任何多余操作,直接调用 this.GLOBAL.name 即可。 方法2:在需要使用全局变量的页面引入global再使用

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包