Vue项目在组件中使用全局变量

快来打我* 2024-03-24 17:43 50阅读 0赞

### 一、定义全局变量 ###

新建一个 testData.js 文件来定义变量名和方法

export default {
      info: '空',
      setInfo(info) {
        this.info = info;
      }
    }

在 main.js 中引入并设为全局变量

import globalData from './utils/testData';
    Vue.prototype.globalData = globalData;

### 二、使用全局变量 ###

**效果：**当进入Test1组件后会自动将全局变量info改为“子页面”

<template>
      <div>
        Test1
        <h1>旧的全局变量:{
       {oldParam}}</h1>
        <h1 :v-model="param">新的全局变量:{
       {param}}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: "Test1",
      data() {
        return {
          oldParam: '',
          param: this.globalData.info,
        };
      },
      methods: {
        init() {
          this.globalData.setInfo("子页面");
          this.param = this.globalData.info;
        },
      },
      created(){
        // 保存旧值
        this.oldParam = this.globalData.info;
        // 根据当前页更新全局变量的值
        this.init();
      }
    
    };
    </script>
    
    <style scoped>
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，50人围观）

还没有评论，来说两句吧...

相关阅读

相关在vue项目中如何定义全局变量全局函数单个的css文件

定义全局变量 ***第一种方式***：全局变量模块文件：global.vue Global.vue文件： <script> const s...

傷城~/ 2024年04月18日 09:11/ 0 赞/ 155 阅读

相关在函数中使用全局变量

问：如何在函数中创建或使用全局变量？如何使用在其他函数中的一个函数中定义的全局变量？答1: > huntsbot.com洞察每一个产品背后的需求与收益，从

向右看齐/ 2024年03月30日 09:28/ 0 赞/ 159 阅读

相关 Vue项目在组件中使用全局变量

一、定义全局变量新建一个 testData.js 文件来定义变量名和方法 export default { info: '空', se

快来打我*/ 2024年03月24日 17:43/ 0 赞/ 51 阅读

相关在vue项目中如何定义全局变量全局函数（marksheng）

> 如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局数定

逃离我推掉我的手/ 2022年10月23日 01:52/ 0 赞/ 278 阅读

相关 vue——scss变量全局使用

vue——scss变量全局使用 1.终端安装sass-resources-loader npm install sass-resources-loader

爱被打了一巴掌/ 2022年10月04日 15:42/ 0 赞/ 382 阅读

相关 vue中如何使用全局变量和全局函数

先说下我自己的小问题吧，今天原本兴致勃勃的想写一个vue的登录拦截，结果各种不顺利，各种问题出现。总结后一句话，还是对vue不了解。但是，页面还得写，谁叫我敬业呢？说到

我就是我/ 2022年06月10日 04:49/ 0 赞/ 319 阅读

相关 vue 使用全局变量

vue 使用全局变量使用vue中的组件进行请求的时候免不了需要设置baseURL。但是这个baseURL最好不要写在某个全局的vue组件中。如果写到一个组件中的话，打包

缺乏、安全感/ 2022年06月08日 07:18/ 0 赞/ 363 阅读

相关 vue中使用Less全局变量

1、安装` `sass-resources-loader，安装less npm install sass-resources-loader --sav

Love The Way You Lie/ 2022年05月20日 10:26/ 0 赞/ 561 阅读

相关 vue-cli项目设置全局变量

将变量挂在到window对象上你可以在你的base.js文件定义一个变量例如TB，将你自定义的所有函数和属性挂载到这个TB对象上，然后再将TB对象挂载到window对象上

淡淡的烟草味﹌/ 2022年05月13日 04:56/ 0 赞/ 308 阅读

相关 vue 全局使用scss 变量

1.安装scss npm install --save-dev sass-loader //sass-loader依赖于node-sass npm i

野性酷女/ 2022年01月12日 03:09/ 0 赞/ 1358 阅读