首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3定义全局变量

Vue3定义全局变量的方式总结(附代码)

2024-04-03 10:39:27 作者：前端爱好者lxy

vue创建全局变量和方法有很多种,下面这篇文章主要给大家介绍了关于Vue3定义全局变量的方式,文中通过代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下

1、main.js 设置全局变量。

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

const app = createApp(App);

/** 定义一个函数，用于对象链式取值 */
const getObjChainingVal = (obj, keyName) => {
  // ...
  return tempObj
}
app.config.globalProperties.getObjChainingVal = getObjChainingVal;

/**定义变量$website，并赋值为devcursor**/
app.config.globalProperties.$website = 'devcursor';

在其他页面使用的时候

（1）在模板中使用：

<template>
  <div>
    作者：{{ getObjChainingVal(data, 'user.info.name') }}
    <div>{{ $website }}</div>
  </div>
</template>

（2）在语法糖<script setup>里使用：

<script setup>
import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const website = app.appContext.config.globalProperties.$website
console.log(website)

// 或者
const { proxy } = getCurrentInstance()
console.log(proxy.$website)

// 使用解构赋值
const { $web } = getCurrentInstance()!.appContext.config.globalProperties
console.log($web)


/**注意！getCurrentInstance()不能在回调函数、方法里使用**/
//若要访问全局变量，需在函数外面调用getCurrentInstance()
const { proxy } = getCurrentInstance()
//或者
const name = getCurrentInstance().proxy.$website;
const getUserInfo=()=>{
   console.log(proxy.$website);
   console.log(name);
}

</script>

（3）组件实例中使用

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

2、使用provide定义变量、inject获取变量

（1）父组件使用provide定义变量

import {provide} from "vue";

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

（2）子组件通过inject获取变量

import {inject} from "vue";

const data=inject('data');
console.log(data,'555555555555555555555');   //输出为：hello Word

附：定义全局函数Vue2 和 Vue3 的区别

由于 Vue3 没有 Prototype 属性，所以需要在 main.ts 文件里使用 app.config.globalProperties 去定义全局函数和变量

Vue2：

// 之前 (Vue 2.x)
Vue.prototype.$http = () => {}
Vue3：
// 之后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}
定义一个全局变量，示例如下：
app.config.globalProperties.$env = "dev";

在 Vue3 移除了过滤器，定义一个全局函数代替 Filters，示例如下：

app.config.globalProperties.$filters = {
  format<T extends any>(str: T): string {
    return `衔蝉-${str}`;
  }
}

总结

到此这篇关于Vue3定义全局变量的方式总结的文章就介绍到这了,更多相关Vue3定义全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！