Vue（八）全局变量和全局方法

Z时代
2024-01-10
分类：综合

vue

一、在main.js同级目录建立一个common.js文件

// 全局变量
const globalObj = {};
// 定义公共变量
globalObj.name = '小明';
// 定义公共方法
globalObj.getAge = function (birthYear) {
    return new Date().getFullYear() - birthYear;
};
export default globalObj

二、在main.js中import这个文件，然后放在Vue原型里

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from 'axios'   // 引入Axios
import common from './common'   // 引入全局文件common.js
Vue.prototype.$axios = Axios;    // 全局变量
Vue.prototype.$common = common;    // 全局变量
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

三、在组件里使用

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <h3>{{$common.name}}</h3>
        <p>{{myAge}}</p>
    </div>
</template>
<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        computed: {
            myAge: function () {
                return this.$common.getAge(1994);
            }
        }
    }
</script>