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>

四、页面输出

五、思考

这种方式与Vuex起到的作用是一样的，比Vuex简单，但是Vuex就是比较专业了。不过还是有深层次的区别的，如下

大神回答：