Vue3定义全局变量的方式总结(附代码)
更新时间:2024年04月03日 10:43:40 作者:前端爱好者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定义全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue element-ui实现input输入框金额数字添加千分位
这篇文章主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12解决element-ui中Popconfirm气泡确认框的事件不生效问题
这篇文章主要介绍了解决element-ui中Popconfirm气泡确认框的事件不生效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07
最新评论