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

一、定义全局变量

新建一个 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>