SoFunction
Updated on 2025-04-03

Summary of how Vue3 defines global variables (with code)

1. Set global variables.

import { createApp } from 'vue'
import App from './'

const app = createApp(App);

/** Define a function for object chain value */
const getObjChainingVal = (obj, keyName) => {
  // ...
  return tempObj
}
 = getObjChainingVal;

/**Define the variable $website and assign the value to devcursor**/
.$website = 'devcursor';

When using other pages

(1) Use in the template:

<template>
  <div>
    author：{{ getObjChainingVal(data, '') }}
    <div>{{ $website }}</div>
  </div>
</template>

(2) Use in syntax sugar <script setup>:

&lt;script setup&gt;
import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const website = .$website
(website)

// orconst { proxy } = getCurrentInstance()
(proxy.$website)

// Use deconstruction to assignconst { $web } = getCurrentInstance()!.
($web)


/**Notice!  getCurrentInstance() cannot be used in callback functions or methods*/
//To access global variables, you need to call getCurrentInstance() outside the functionconst { proxy } = getCurrentInstance()
//orconst name = getCurrentInstance().proxy.$website;
const getUserInfo=()=&gt;{
   (proxy.$website);
   (name);
}

&lt;/script&gt;

(3) Used in component instance

<script>
export default {
  mounted() {
    (this.$website) // 'devcursor'
  }
}
</script>

2. Use provide to define variables and inject to get variables

(1) Parent component uses provide to define variables

import {provide} from "vue";

const data='hello Word';
provide('data',data);

(2) Subcomponents obtain variables through inject

import {inject} from "vue";

const data=inject('data');
(data,'555555555555555555555');   //The output is：hello Word

Appendix: Define the difference between global functions Vue2 and Vue3

Since Vue3 does not have a Prototype attribute, it needs to be used in the file to define global functions and variables

Vue2：

// Previous (Vue).$http = () =&gt; {}
Vue3：
// After (Vue)const app = createApp({})
.$http = () =&gt; {}
Define a global variable，The example is as follows：
.$env = "dev";

In Vue3, the filter was removed and a global function was defined instead of Filters was defined as follows:

.$filters = {
  format&lt;T extends any&gt;(str: T): string {
    return `Cicada-${str}`;
  }
}

Summarize

This is the end of this article about the way Vue3 defines global variables. For more related content on Vue3's global variables, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!