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

辣椒王

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

1. import { createApp } from 'vue'
   
2. import App from './App.vue'
   
3. 
   
4. const app = createApp(App);
   
5. 
   
6. /** 定义一个函数，用于对象链式取值 */
   
7. const getObjChainingVal = (obj, keyName) => {
   
8.   // ...
   
9.   return tempObj
   
10. }
    
11. app.config.globalProperties.getObjChainingVal = getObjChainingVal;
    
12. 
    
13. /**定义变量$website，并赋值为devcursor**/
    
14. app.config.globalProperties.$website = 'devcursor';

复制代码

在其他页面使用的时候

（1）在模板中使用：

1. <template>
   
2.   <div>
   
3.     作者：{{ getObjChainingVal(data, 'user.info.name') }}
   
4.     <div>{{ $website }}</div>
   
5.   </div>
   
6. </template>

复制代码

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

1. <script setup>
   
2. import { getCurrentInstance } from 'vue'
   
3. 
   
4. const app = getCurrentInstance()
   
5. const website = app.appContext.config.globalProperties.$website
   
6. console.log(website)
   
7. 
   
8. // 或者
   
9. const { proxy } = getCurrentInstance()
   
10. console.log(proxy.$website)
    
11. 
    
12. // 使用解构赋值
    
13. const { $web } = getCurrentInstance()!.appContext.config.globalProperties
    
14. console.log($web)
    
15. 
    
16. 
    
17. /**注意！getCurrentInstance()不能在回调函数、方法里使用**/
    
18. //若要访问全局变量，需在函数外面调用getCurrentInstance()
    
19. const { proxy } = getCurrentInstance()
    
20. //或者
    
21. const name = getCurrentInstance().proxy.$website;
    
22. const getUserInfo=()=>{
    
23.    console.log(proxy.$website);
    
24.    console.log(name);
    
25. }
    
26. 
    
27. </script>

复制代码

（3）组件实例中使用

1. <script>
   
2. export default {
   
3.   mounted() {
   
4.     console.log(this.$website) // 'devcursor'
   
5.   }
   
6. }
   
7. </script>

复制代码

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


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

1. import {provide} from "vue";
   
2. 
   
3. const data='hello Word';
   
4. provide('data',data);

复制代码

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

1. import {inject} from "vue";
   
2. 
   
3. const data=inject('data');
   
4. console.log(data,'555555555555555555555');   //输出为：hello Word

复制代码

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

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

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

复制代码

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

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

复制代码

总结

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

来源:https://www.jb51.net/javascript/319207ad8.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！