1 单文件引入
1.1 创建存放全局变量和方法的vue文件 Common.uve

<script>
  const userName = 'yangjing';
  function add(a,b) {
    return a+ b
  }
  export default {
    userName,
    add
  }
</script>

1.2 在需要使用的组件（A组件和B组件）中引入Common.uve

<template>
  <div>
    <h2 @click="changeName">{{name}}</h2>
    <h2 @click="add">3+6 = {{num}}</h2>
  </div>
</template>

<script>
  import Common from '@/components/Common'
  export default {
    name: "Details",
    data () {
      return {
        name: Common.userName,
        num: ''
      }
    },
    methods: {
      add() {
        this.num = Common.add(3,6)
      }
    }
  }
</script>

2. 全局引入
全局变量模块挂载到vue原型中

2.1 在main.js中引入文件，并挂载到Vue原型上

import Common from '@/components/Common'
Vue.prototype.Common = Common;

2.2 在需要使用的组件中使用 this

<template>
  <div>
    <h2 @click="changeName">{{name}}</h2>
    <h2 @click="add">3+6 = {{num}}</h2>
  </div>
</template>

<script>
  export default {
    name: "Details",
    data () {
      return {
        name: this.Common.userName,
        num: ''
      }
    },
    methods: {
      add() {
        this.num = this.Common.add(3,6)
      }
    }
  }
</script>

Vue-全局变量和方法 https://www.cnblogs.com/yangchin9/p/11002636.html