当前位置:首页 » 《休闲阅读》 » 正文

Vue3定义全局变量的方式总结

27 人参与  2024年05月01日 12:13  分类 : 《休闲阅读》  评论

点击全文阅读


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.$websiteconsole.log(website)// 或者const { proxy } = getCurrentInstance()console.log(proxy.$website)// 使用解构赋值const { $web } = getCurrentInstance()!.appContext.config.globalPropertiesconsole.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 

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/102611.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 全文我死遁后,族长悔疯了:结局+番外优质全章(战痕音音)列表_全文我死遁后,族长悔疯了:结局+番外优质全章
  • [完结]顾昕瑶裴司珩唐念慈彩蛋(又名:怎甘心扬汤止沸)全
  • 换嫁成寡妇,我靠经商旺全家+后续+苏妙妙完本_换嫁成寡妇,我靠经商旺全家+后续+(苏妙妙)
  • (番外)+(全书)一念情深一念婚烬:全文+结局+番外***_(傅青青卢振庭温素素)一念情深一念婚烬:全文+结局+番外列表_笔趣阁(傅青青卢振庭温素素)
  • 换嫁战死的小公爷后,夫君回来了(顾青柠陆景煜)_换嫁战死的小公爷后,夫君回来了
  • 觉醒签到系统后冷宫皇子杀疯了李吟霜秦天在线(又名:觉醒签到系统后冷宫皇子杀疯了)赏析_觉醒签到系统后冷宫皇子杀疯了李吟霜秦天在线(又名:觉醒签到系统后冷宫皇子杀疯了)赏析
  • 出国后前妻对我穷追不舍后续(又名:我提出离婚两清后总裁妻子全家慌了)倾心编著(顾迟云云晚晚)
  • 顾君蘅孟昭宁(又名:时光烬余温)潜心更新完本_完本顾君蘅孟昭宁(又名:时光烬余温)潜心更新
  • 穿越星海说爱你:结局+番外,林雪羽梁淮序列表_穿越星海说爱你:结局+番外,林雪羽梁淮序
  • 「重生后,我和老公双双悔婚」后续已完结_「陆知归明星温欣柔」章节分享
  • 轻弹一首别离梁慕白苏洛沈亦琛番外霜珑
  • 全文穿越星海说爱你:结局+番外免费品鉴(林雪羽梁淮序)列表_全文穿越星海说爱你:结局+番外免费品鉴

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1