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 
转载请说明出处内容投诉
CSS教程_站长资源网 » Vue3定义全局变量的方式总结

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买